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伸展整个页面

回答

相关问题