具有對準問題

我有一個輸入類型和按鈕的形式在這裏輸入具有對準問題

<div class="span12" style="margin-left: 10px; margin-right: 5px;"> 
    <div class="row-fluid mt20"> 
     <div id="searchBox"> 
     <form id="general-search-form" autocomplete="off"> 
      <input type="text" placeholder="" class="search-query" name="q" /> 
       <button type="submit" class="btn pull-right" title="search"></button> 
     </form> 
     </div> 
    </div> 
</div>

我需要的佈局使得在桌面版本的輸入型佔50％的寬度並且搜索按鈕佔用50％的寬度。在移動版本中，輸入類型應位於頂部，搜索按鈕應位於下方。怎麼做。

來源

2013-03-21 Coder_sLaY

我想你可能想有這樣的事情......

<form> 
<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span6"> 
    <input type="text" class="input-block-level"> 
    </div> 
    <div class="span6"> 
    <button type="submit" class="btn custom-button">Search</button> 
    </div> 
</div> 
</div> 
</form>

那麼你就需要樣式按鈕自己，使其佔用span6的整個寬度。

.custom-button { 
    width: 100%; 
}

你可能需要一些試驗和錯誤與按鈕的寬度考慮到填充&邊界。

來源

2013-03-21 10:40:46

謝謝......：D – 2013-03-21 10:51:24

將float:left設置爲寬度設置爲50％的瀏覽器CSS中的兩個元素。對於移動設備CSS使用float:none。嘗試使寬度達到100％。

這會給你需要的輸出。可能需要或可能不需要做小調整。

來源

2013-03-21 07:31:27 Harpreet

感謝您的提示。無論如何用跨度做它？ – 2013-03-21 08:05:16

爲什麼你想要跨度。跨度是內聯元素。您的表單元素不是內聯元素。 – Harpreet 2013-03-21 08:11:24

@ HarpreetK。 - 我認爲他正在談論與Bootstrap有關的跨度。 span1，span2，span3等是Bootstrap中的類，它們是其網格系統的一部分。 – 2013-03-21 10:35:24

具有對準問題

回答

相關問題