Question

这是我目前的用户界面：

[！[在此处输入图像说明] [1]] [1]

我想将图片中显示的红色按钮移动到输入的左侧。到目前为止，我已尝试添加margin-left属性，但这不起作用。有没有人建议如何让按钮向左移动？我希望它与底部输入字段对齐。

Answer 1

Bootstrap 3有一个名为Input Group的控件。您可以像这样使用它：

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>
    <input type="text" class="form-control">
</div>

注意：要向左或向右移动按钮，只需将<input>移到<div class="input-group-btn">

上方或下方即可

Answer 2

放

style="position:absolute"

到您的按钮后，您可以在Left之后移动。

Answer 3

试试这个

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

Answer 4

解决方案比我想象的要容易，而不是添加保证金 - 我添加了保证金权利：20px并且它有效。

CSS：向左移动按钮

4 个答案: