表单中,如何在input右侧紧邻位置加按钮?

提问 未结
3 116
whbook1
whbook1 2019-1-7
悬赏:20飞吻
如下面的代码和图示。
求教:如何将按钮放在文本框右侧,而不是另起一行?

<div class="layui-form-item" pane>
@Html.LabelFor(model => @Model.Url_Word, htmlAttributes: new { @class = "layui-form-label" })
<div class="layui-input-block">
<span>
@Html.TextBoxFor(model => @Model.Url_Word, new { @Id = "Url_Word", @placeholder = "点击此处选择或上传文件...", @autocomplete = "off", @class = "layui-input", onfocus = "this.blur();", onclick = "BrowseServer('Url_Word');" })
@Html.ValidationMessageFor(model => @Model.Url_Word)

<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="$('#Url_Word').val(null)">
<i class="layui-icon"></i>
</button>
</span>
</div>
</div>
回帖
  • 丘尔
    2019-1-8
    加个 style="display:inline-block"
    0 回复
  • 雨伞
    2019-1-8
    给input的·layui-input-block改为layui-input-inline。建议多看看文档或实例,里面都有的
    0 回复
  • IDyun
    2019-1-8


     <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="padding-right: 80px;">
    <button style="position: absolute;top: 0;right: 6px;
    cursor: pointer;" type="button" class="layui-btn">按钮</button>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-inline">
    <input type="text" name="input" autocomplete="off" class="layui-input">
    </div>
    <button style="float: left;" type="button" class="layui-btn">按钮</button>
    </div>
    0 回复