将输入元素放在页面右侧

Question

我在页面右侧放置两个元素时遇到一些困难。奇怪的是，类似问题的建议答案根本不起作用或结果不佳，但如果我使用像文本字段这样的简单元素，大多数都是正确的。

观点是： 这就是我所拥有的：

input, select, textarea {
  max-width: 280px;
  text-size-adjust: auto;
}

<div class="input-group">
  <span class="input-group-addon">Filter</span>
  <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>

我尝试使用float: right并使用引导网格系统调整位置。

Answer 1

试试这个：

<div class="input-group">
        <span class="input-group-addon">Filter</span>
        <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
    </div>

DEMO

或

.input-group-addon {
    min-width:100px;
    text-align:left;
}

DEMO HERE

Answer 2

我假设您以某种方式将input-group设置为固定宽度，而不是默认的100％。否则谈论定位是没有意义的。

无论如何，bootstrap都有一个pull-right类，你可以使用它来向右浮动元素。只需将其添加到您的第一个div。

.input-group {
  width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group pull-right">
  <span class="input-group-addon">Filter</span>
  <input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>

在官方文档here

上阅读此内容