Input not displaying inline
I am struggling to see why 1 input element is not dropping to line up withe the label. I have tried various options, but still the same. I have included a grab and the css and would be grateful if someone could show me my error. Thanks
.adduserform {
width:425px;
font:12px Arial, Helvetica, sans-serif;
color:#777;
background-color:#fff;
font-weight:bold;
padding: 10px;
}
.adduserform label {
display:block;
width:110px;
float:left;
font-weight:normal;
font-size:12px;
padding: 0 0 0 30px;
z-index:1000;
clear:both;
}
.adduserform .inputbox {
float:right;
border:1px solid #ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:40%;
}
.adduserform textarea {
padding:8px 3px 2px 3px;
margin:2px 0 10px 3px;
border:1px solid #ccc;
}
.adduserform select {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
outline:none;
clear:right;
}
+++UPDATE HTML+++++
<dl>
<dt>
<label for="AUSR_phone">Phone:</label>
&l开发者_Go百科t;/dt>
<dd>
<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
You're floating the input box right, but the top select is not wide enough to force the input onto a second line. The bottom two are being forced down because the area is not wide enough to accommodate both input fields.
You can try putting both your label and input/select inside a div and use float to control positioning within that div:
html:
<div>
<label>text</label>
<input type="text"/>
</div>
css:
label {float:left; width:30%; margin:0 1em; }
input, select {float:left; width:60%; }
div {overflow:hidden; width:100%;}
Put a <div>
around each label and input or select combo and style the div with clear: both;
. That will force a new line for each div.
little demo: http://jsfiddle.net/6sQw5/4/
edit: the float on the input is not even needed, fixed the demo.
精彩评论