输入不显示内嵌

我很努力地看到为什么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

来源

2011-08-04 bollo

也添加您的HTML – Gareth

你浮在输入框右侧，但顶部选择不够宽，强制输入到第二行。由于该区域不够宽以容纳两个输入区域，因此底部两个区域被迫下降。

你可以尝试把两者的标签和输入/选择一个div内使用float到专区内控制定位：

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%;}

来源

2011-08-04 11:34:09 medkg15

以我的经验overflow：hidden可能会导致一些验证器，工具提示和下拉插件的问题。工具提示或展开的下拉菜单将被div剪切。 – Willem

@ willem感谢您的注意 – bollo

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

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

编辑：甚至不需要输入浮动，固定演示。

来源

2011-08-04 11:38:10 Willem

输入不显示内嵌

回答

相关问题