javascript - 如何在角度预输入中使用 css 对齐元素

Question

http://plnkr.co/edit/LmMwgy2gig11nQXzCt1I?p=preview

我希望最终结果如下所示：

我的 css 应该如何，以便我的搜索按钮与搜索输入对齐并紧邻搜索输入？

Answer 1

像这样的东西：

<div>
    <div style="width: 300px; float: left; height: 40px;"></div>
    <div style="width: 80px; float: left; height: 40px;"></div>
    <div style="clear: both"></div>
</div>

然后，您将按钮放在第二个 div 中，并将输入放在第一个...

Answer 2

使周围元素 ( ) 位置相对。

将输入位置设为绝对，然后定位。

对于 mag 图标，只需使用背景图像，确保将显示设置为“块”并设置正确的宽度和高度。删除 font-size: 0 的搜索文本；

Answer 3

看这个演示

    <div class="srch">
      <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8">
      <button>search</button>
    </div>

    .srch button {
      float: right position: absolute;
      margin-left: -56px;
      display: table-cell;
      background: #08c;
      color: #fff;
      height: 30px;
      border: none;
    }
    .srch input {
      float: left;
      padding-right: 60px;
    }