Question

我是html的新手，我有一个code，我希望将输入标记和右侧标记上的按钮对齐在同一行。我怎么能这样做？

  <div class="form-group input-group">
    <input type="text" class="form-control" />
    <span class="input-group-btn input-group-addon">
        <button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
    </span>
  </div>

我的jsfiddle：https://jsfiddle.net/DTcHh/17952/

Answer 1

你也可以这样做......

<style>
.nopadding{
  padding:0;
}
</style>
<div class="timeline-panel">
  <div class="timeline-heading">
    <div class="form-horizontal col-xs-12">
      <div class="form-group input-group">
        <input type="text" class="form-control" />
        <span class="input-group-btn input-group-addon nopadding">
                            <button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
                </span>
      </div>
    </div>
  </div>
</div>

Answer 2

由于您使用的是bootstrap，因此只需在输入字段中添加pull-right并按两者即可。例如：

 <input type="text" class="form-control pull-right" />

按钮也是：

 <button class="btn btn-del input-group-delete pull-right" data-tooltip="tooltip" >

Answer 3

好的，试试这个

<div class="timeline-panel">
  <div class="timeline-heading">
    <div class="form-horizontal col-xs-12">
      <div class="form-group input-group col-xs-9">
        <input type="text" class="form-control" />
        </div>
        <button class="btn btn-del input-group-delete col-xs-3" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>

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

Answer 4

在引导程序中使用addon时，如果在addon span中定义任何元素，它会混乱，因为在引导程序中，addon类在css中有填充，这就是你不能对齐按钮的方式，你可以这样做：< / p>

<div class="timeline-panel">
  <div class="timeline-heading">
    <div class="form-horizontal col-xs-12">
      <div class="form-group input-group">
        <input type="text" class="form-control" />
        <span class="input-group-btn input-group-addon btn btn-del input-group-delete"> <i class="fa fa-trash-o"></i>
                </span>
      </div>
    </div>

如何在同一行上对齐div输入标记和按钮

4 个答案: