如何在角度提前中使用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内，将输入放置在第一个div内。

Answer 2

使周围的元素（）位置相对。

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

对于mag图标，只需使用背景图片，确保将显示设置为“阻止”并设置正确的宽度和高度即可。 删除字体为：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;
    }