上移按钮以选择旁边答案

【问题标题】：Move button up next to select上移按钮以选择旁边
【发布时间】：2019-03-28 21:35:55
【问题描述】：

如何将红色 - 按钮移动到控件顶部旁边？

HTML 如下所示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <select size="10" class="form-control" id="assigned-tenants" name="assignedTenants">
                <option value="1">fdsaf</option>
            </select>

            <button ata-toggle="tooltip" title="Add" class="btn btn-danger">
                <span class="glyphicon glyphicon-minus"></span>
            </button>

        </div>
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您必须使用引导类 pull-left 来添加该列中的第一个元素，即选择框。

<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <div class="col-md-10 pull-left" style="padding-right:0px">
                <select size="10" class="form-control" id="assigned-tenants" name="assignedTenants" class="pull-left">
                    <option value="1">fdsaf</option>
                </select>
            </div>
            <div class="col-md-2 pull-left" style="padding-left:0px">
                <button ata-toggle="tooltip" title="Add" class="btn btn-danger pull-left">
                    <span class="glyphicon glyphicon-minus"></span>
               </button>
           </div>
       </div>
 </div>

【讨论】：

不行，padding错了，请看我的原帖，我现在加了一个sn-p的代码。
现在有太多的内边距（从列内的列）并且不允许与页面上的其他元素一起使用。
我已经更新了答案，现在检查代码，填充为0，您可以通过给样式添加更多填充来调整。
是的，我刚刚调整了边距和填充，现在可以正常工作了。谢谢。

【解决方案2】：

使用垂直对齐：顶部；在该按钮的 css 中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <select size="10" id="assigned-tenants" name="assignedTenants">
                <option value="1">fdsaf</option>
            </select>

            <button ata-toggle="tooltip" title="Add" class="btn btn-danger" style="vertical-align:top;">
                <span class="glyphicon glyphicon-minus"></span>
            </button>

        </div>
    </div>
</div>

【讨论】：

这是可行的，但是将表单控件添加到选择中会弄乱它。