輸入不顯示內嵌

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

輸入不顯示內嵌

回答

相關問題