Question

我很难理解为什么1个输入元素没有与标签对齐。我尝试了各种选择，但仍然是一样的。我已经包含了一个抓斗和css，如果有人能告诉我我的错误，我将不胜感激。感谢

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

        }

+++更新HTML +++++

<dl>
 <dt>
   <label for="AUSR_phone">Phone:</label>
 </dt>
 <dd>
   <input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
  </dd>
</dl>

Grab to show Input layout

Answer 1

您正在向右浮动输入框，但顶部选择不够宽，无法将输入强制到第二行。底部两个被强制关闭，因为该区域不够宽，无法容纳两个输入字段。

您可以尝试将标签和输入/选择放在div中，并使用float控制该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%;}

Answer 2

在每个标签周围放置<div>并输入或选择组合，并使用clear: both;设置div的样式。这将为每个div强制换行。

小演示：http://jsfiddle.net/6sQw5/4/

编辑：甚至不需要输入上的浮点数，修复了演示。

输入不显示内联

2 个答案: