設置水平表單和追加按鈕

我有一個表格： http://fiddle.jshell.net/eJ2kS/ 我想要在一行上輸入標籤和文本，並將按鈕附加到文本輸入，但文檔對於附加按鈕有點模糊： http://twitter.github.com/bootstrap/base-css.html#forms 設置水平表單和追加按鈕

來源

2012-08-10 gilbertbw

也許創建HTTP表單的演示：// fiddle.jshell.net張貼您的表單代碼和您的css代碼。 – 2012-08-10 22:11:03

我們需要知道您的CSS代碼。 – danijar 2012-08-10 22:22:57

@sharethis這只是默認的twitter引導，沒有自定義的CSS，我把完整的引導CSS在jsfiddle – gilbertbw 2012-08-10 22:37:36

你選擇呢？ enter image description here

如果是這樣，那麼代碼應爲......

<form id="signup" method="post" action="/signup" class="form-horizontal"> 
        <legend>Sign Up</legend> 

        <div class="control-group"> 
         <label for="appendedInputButton" class="control-label">User Name</label> 
         <div class="controls"> 
          <div class="input-append"> 
          <input type="text" size="16" id="appendedInputButton" class="span2"><button type="button" class="btn">Check Availabilty</button> 
          </div> 
         </div> 
        </div> 
       </fieldset> 
      </form>

我想我已經更新了你的小提琴... RIGHT HERE.

來源

2012-08-13 15:54:10

謝謝，我沒有意識到輸入和按鈕必須在同一行 – gilbertbw 2012-08-14 14:39:32

很高興幫助你。 – 2012-08-14 15:58:26

您必須覆蓋下面的樣式。請注意，這不是使用框架的解決方案。

.control-group, .btn, .control-group label, .controls{ float:left !important; } 
.controls{ margin:0 1em !important; } 
.control-group{ margin:0 !important; } 
label{ margin:5px !important; }

我希望這是你想要的。它將所有需要的元素都浮動到左側並修正一些邊距。就這樣。 !important是強制覆蓋框架中的舊值。

這是你更新的提琴：http://fiddle.jshell.net/eJ2kS/5/

來源

2012-08-10 22:46:26 danijar

設置水平表單和追加按鈕

回答

相關問題