Select box not floating right
I'm trying to c开发者_高级运维reate a basic title bar div that contains an h1 and a select list. I want the select list to be on the far right of the div, but floating it right is not working. Does anyone have any ideas? The code is very simple but can't see where the mistake is. Thanks!
<style type="text/css">
#select {
float: right;
}
h1 {
display: inline;
}
#titleBar {
width: 800px;
}
</style>
<body>
<div id="titleBar"><h1>Select Your Car </h1>
<select name="categories">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
Here's a link to the jsfiddle: http://jsfiddle.net/qhvDG/1/
Your style is not correct it should be as shown below, because the # represents an element's id and select is the tag name not the id.
select {
float: right;
}
Or better yet a little more descriptive like this:
div#titleBar > select {
float: right;
}
Here is an example fiddle http://jsfiddle.net/qhvDG/3/
Your "select" in the CSS is an ID, not an element name. Just remove the # sign from #select.
Try using "select" instead of #select in your style.
select {
float: right;
}
加载中,请稍侯......
精彩评论