Question

我有多个选择框，我希望将它们排成一行。我以为我可以在div的帮助下做到这一点，但由于某种原因我遇到了麻烦。每个选择都在页面的整个宽度上进行拉伸，即使我在css中指定了我不想要的那个。为什么会这样？另外，我给每个人选择一个标题，只需在其上面放置文字即可。有没有更好的方法来制作冠军？

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;}

Answer 1

Div是块元素，因此默认情况下会叠加在一起。如果您希望它们彼此相邻，则需要float它们。

.section{
     float: left;
}

JSFiddle

Answer 2

您可以尝试：

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

这是浮动到一定程度的替代方案。它可能更适合您的需求，但很难说。 display: inline-block附带rendering drawbacks，当然还有浮动。

有时我更喜欢它 - 很多人都喜欢漂浮，因为它是唯一的选择，但它也可能是一个真正的痛苦。

JSFiddle sample using display rather than float

如您所见，它在不使用clearfix的情况下保留边框，而float会破坏边框。

编辑：如果您选择使用float，那么在包含的元素周围设置边框的好方法是将overflow: auto添加到#parameters，如下面的小提示所示：

Float fiddle with clearfix

Answer 3

我更改了你的html代码，以便在每个select标签的“tittle”中使用标签。

您可以在此处查看：http://jsfiddle.net/SmRzL/4/

Answer 4

关于如何对齐，你需要浮动每个部分的元素：

.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/

html多选内部div拉伸整个页面

4 个答案: