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

【问题标题】：how to align elements using css in angular typeahead如何在角度预输入中使用 css 对齐元素
【发布时间】：2013-10-24 21:44:18
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap angular-ui

【解决方案1】：

看到这个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;
    }

【讨论】：

【解决方案2】：

类似这样的：

<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 中，将输入放在第一个...

【讨论】：

【解决方案3】：

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

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

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

【讨论】：