入力がインラインで表示されない

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; 

     } 

+++ UPDATE 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> 

Answer 1

あなたは、入力ボックスを右に浮動しているが、トップの選択は、第二行に入力を強制するのに十分な幅ではありません。両方の入力フィールドを収容できるだけの面積がないため、下の2つは強制的に停止しています。あなたのラベルと入力の両方を入れて試すことができます

は/ divの内側に選択して、その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>を入れて、コンボを入力または選択し、divをclear: both;でスタイルします。それは各部門に新しい行を強制するでしょう。

少しデモ：http://jsfiddle.net/6sQw5/4/

編集：入力のフロートであっても必要とされていない、デモを修正しました。