开发者

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>

Input not displaying inline


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜