如何使用角度类型中的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

使周围的element（）位置相对。

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

对于mag图标，只需使用背景图像，确保将显示设置为“阻止”并设置正确的宽度和高度。使用font-size：0;

删除搜索文本

Answer 3

请参阅 Demo

    <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;
    }