html multiple select inside div stretching entire page
题
I have a buch of multiple select boxes and I wanted to line them up in a line across the page. I thought I could do this with the help of divs, but for some reason I am running into trouble. Each select is being stretched across the entire width of the page even though I specified in the css that I didn't want that. Why is this happening? Also, I am giving each select a title by just putting text on top of it. Is there a better way to make a title?
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;}
其他提示
You can try:
.section {
width: 50px;
display: inline-block
}
This is an alternative to float to a degree. It may suit your needs better, but it's difficult to say. display: inline-block
comes with rendering drawbacks, as does float of course.
I prefer it sometimes - A lot of people jump at float like it's the only choice, but it can be a real pain too.
JSFiddle sample using display rather than float
As you can see, it preserves your border without using a clearfix, whereas float breaks the border.
edit: If you choose to use float, a good method of making the border wrap around the contained elements is to add overflow: auto
to #parameters
, as shown in the fiddle below:
I changed your html code a bit in order to use labels in the "tittle" of each select tag.
You can view here: http://jsfiddle.net/SmRzL/4/
In regards to how to align, your elements you need to float each section:
.section{
float: left;
padding: 10px;
}
In regards, to adding a title to each section personally I would do something along the lines of this:
<span class="title">Term </span>
.title {
display:block;
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
See this fiddle for reference: http://jsfiddle.net/8rQXD/