スタイリングの難しさCSSフォーム

Question

フォームのレイアウトオプションとしての論争の末、テーブルを周囲のテーブルに囲んで、私は順序付けられていないリストに行くことに決めました。私は最終的に私が意図したようにラベルと要素を表示していますが、私が追加した 'メモ' divはその上にある入力と整列することを拒否します。

私は以下のコードを追加しました。私はプレースメントを判断するために選択した華やかな背景色をお試しください！誰もが、なぜこの 'ノート'部門が一緒に遊ぶことを拒否するかについての提案はありますか？私は単純な解決策があると確信していますが、私は完全に困惑しています。事前にどうもありがとうございました。

form.contact label 
{ 
    float: left; 
    position: absolute; 
    background: red; 
} 
form.contact input 
{ 
    width: 200px; 
    margin-left: 15em; 
} 
form.contact .note 
{ 
    margin-left: 15em; 
    width: 176px; 
    background: yellow; 
} 
form.contact ul 
{ 
    list-style: none; 
    position: absolute; 
    padding: 0; 
} 
form.contact ul li 
{ 
    float: left;  
    clear: left;  
    width: 100%;  
    padding-bottom: 1em; 
    margin-bottom: 10px; 
    background: pink; 
    left: 0; 
} 

<ul> 
     <li> 
      <label for="address1">Address Line 1:</label> 
      <input name="address1" type="text" id="address1" /> 
     </li> 
     <li> 
      <label for="address2">Address Line 2:</label> 

      <input name="address2" type="text" id="address2" /> 
     </li> 
     <li> 
      <label for="address3">Address Line 3:</label> 
      <input name="address3" type="text" id="address3" /> 
     </li> 
     <li> 
      <label for="address4">Address Line 4:</label> 
      <input name="address4" type="text" id="address4" /> 
      <div class="note">This is a note</div> 

     </li> 

     <li> 
      <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" /> 
     </li> 
    </ul> 

Answer 1

inputとdivは、デフォルトで異なるフォントサイズを有し、そしてem測定と弾性レイアウトを使用して、フォントのサイズによって影響されるからです。

これを修正：

* {font-size: 12px;}

Answer 2

入力は、インライン要素とdiv.noteがブロック要素です。ブラウザのデフォルトCSSでは、インライン要素とdiv.notesの設定が異なります。 magin-leftおよび/またはpadding-leftの入力値と.noteの値を調整することをお勧めします。 Finbarrが指摘しているように、sepeficy font-sizeも必要な場合があります。

Answer 3

2つの答えが気になる。 最初に、デフアルパディングを考慮しましたか？マージンを指定するのがわかりますが、パディングレベルが固定されていない場合、異なる要素が異なるパディングレベルを継承することがあります。

スクリーンショットを投稿できれば助かります。私がkonqueror & firefoxでテストしたときに提供したサンプルコードは、私にとって完璧に動作します。

...大丈夫です、私はこれを入力している間に弱いのはすでにほとんど同じことを言っています。しかし、私のスクリーンショットのコメントは立っています。エラーが何であるかを正確に確認すると役立ちます。