html多個選擇裏面div伸展整個頁面

我有一個多選擇框buch，我想排隊他們在整個頁面的一行。我以爲我可以在div的幫助下做到這一點，但由於某種原因，我遇到了麻煩。即使我在css中指定了我不想要的，每個選擇都在頁面的整個寬度上被拉伸。這是爲什麼發生？此外，我只是把文本放在它的頂部給每個選擇一個標題。有沒有更好的方法來製作標題？html多個選擇裏面div伸展整個頁面

HTML

<div class='bold'> 
      <div id="parameters"> 
       <div class="section">Program<br> <select multiple="multiple" name="program"> 
          <option value="SGS">SGS</option> 
         </select> 
       </div>  
       <div class="section">School <br><select multiple="multiple" name="school"> 
          <option value="FLH">FLH</option> 
          <option value="MID">MID</option> 
          <option value="SUN">SUN</option> 
          <option value="MNC">MNC</option> 
         </select> 
       </div>  
       <div class="section">Term <br><select multiple="multiple" name="term"> 
          <option value="Fall 2011">Fall 2011</option> 
          <option value="Late Fall 2011">Late Fall 2011</option> 
         </select> 
       </div>  
       <div class="section">Extension<br> <select multiple="multiple" name="ext"> 
          <option>Something...</option> 
         </select> 
       </div>  
      </div> 
     </div>

CSS

#parameters{width:100% 
     height:150px; 
     border-style:solid; 
     border-width:2px; 
     border-color:grey;} 
.section{width:50px;}

來源

2011-11-02 user1015214

Div的是塊元件，以便將堆疊在默認情況下彼此的頂部上。如果你想讓他們坐在一起，你需要float他們。

.section{ 
    float: left; 
}

JSFiddle

來源

2011-11-02 21:14:56

謝謝，我忘記了。 – user1015214

你可以試試：

.section { 
    width: 50px; 
    display: inline-block 
}

這是漂浮在一定程度上替代。它可能更適合您的需求，但很難說。 display: inline-block自帶rendering drawbacks，當然也是。

我有時候更喜歡 - 很多人都喜歡跳躍，因爲這是唯一的選擇，但它也可能是一個真正的痛苦。

JSFiddle sample using display rather than float

正如你所看到的，它保留了你的邊界，而無需使用clearfix，而浮動打破了邊界。

編輯：如果您選擇使用浮動，使得周圍包含的元素邊框包裹的好方法是添加overflow: auto到#parameters，如下圖所示的小提琴：

Float fiddle with clearfix

來源

2011-11-02 21:22:52

我改變你的html代碼有點爲了在每個選擇標籤的「標題」中使用標籤。

您可以查看這裏：http://jsfiddle.net/SmRzL/4/

來源

2011-11-02 21:23:42 Galled

在關於如何使您的元素，你需要浮動每個部分：

.section{ 
    float: left; 
    padding: 10px; 
}

在問候，以添加標題到每個部分我個人做沿着這行的東西：

<span class="title">Term </span> 

.title { 
    display:block; 
    font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial; 
}

看到這個搗鼓參考：http://jsfiddle.net/8rQXD/

來源

2011-11-02 21:29:18 Jesse

html多個選擇裏面div伸展整個頁面

回答

相關問題