頁面右側的位置輸入元素

我在頁面右側放置兩個元素有一些困難。奇怪的是，類似問題的建議答案根本不起作用或者結果不佳，但如果我使用諸如文本字段等較簡單的元素，其中大多數都是正確的。頁面右側的位置輸入元素

的觀點是：這是我有：

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並通過引導網格系統來調整位置。

來源

2017-03-09 Seagull

你可以把更多的代碼？ –

更多類似的代碼？ – Seagull

我假設你設置你的input-group有一個固定的寬度，而不是默認的100％。否則，談論定位是沒有意義的。

在任何情況下，引導程序都有一個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

來源

2017-03-09 10:03:16 Chris

哈哈，那很容易？我花了整整一個早上試圖解決這個問題。非常感謝你:) – Seagull

沒問題！ 'pull-right'類是一個引導類，基本上就是'float：right！important;'。 – Chris

試試這個：

<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

來源

2017-03-09 10:06:38

頁面右側的位置輸入元素

回答

相關問題