html - 如何在同一行对齐 div 输入标签和按钮

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>