奇妙なCSSマージン問題

Question

、私は次の構造を持つクライアントによって設計されたフォームをスタイリングしてい

：

<div class="formRow"> 
    <div class="fieldName"> 
     Email 
    </div> 
    <div class="fieldInput"> 
     <input .../> 
    </div> 
</div> 

フォームの幅が500pxなどですが、フィールド名のdiv要素とそれぞれの上部にfieldInput divのスタック別の場所に座って座っているのではなく。これは（少なくともChromeとFirefoxでは）fieldName divの計算された右端の余白が340ピクセルになり、フォームの幅全体を占めるからです。

この動作を無効にすることはできません。 10pxの余白を入力すると何も起こりません。また、divの幅をハード番号またはパーセンテージに設定すると、奇妙な右マージンではなく、内側の幅だけが変更されます。

私はどのようなCSSの頭痛を抱えていますか？

ところで、ここでのCSSです：

.formRow{ 
    padding: 3px 0 3px 0; 
    position: relative; 
    height: auto; 
    width: 100%; 
} 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 

Answer 1

ことの一つは、あなたが過剰に使用してdiv要素であるということです。 「このセクションである、あなたがタグの意味論的な意味に違反している両方のセクションのDIVタグを使用することにより

<style type="text/css"> 
    UL, UL LI 
    { 
     margin: 0px; 
     padding: 0px; 
    } 

    UL LI 
    { 
     list-style: none; 
    } 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 
</style> 

<ul> 
    <li><label class="fieldName">Email</label> 
     <input class="fieldInput" .../></li> 
    ... 
</ul> 

：

<div class="formRow"> 
    <label class="fieldName">Email</label> 
    <input class="fieldInput" .../> 
</div> 

または、さらに良い：同じコードは次のように書くことができますこのページの他のセクションとは区別されます。あなたが実際にやろうとしているのは、あなたのフォームlabelをあなたのInputとは違ったスタイルにすることです。

Answer 2

試してみることを、

.fieldName {display: inline} 

または

.fieldInput {display: inline} 

または両方

Answer 3

はあなたが各要素にdisplay: inline;を追加する場合は追加アロイ彼らと並んで座ってください。彼らはデフォルトでblock要素としてレンダリングされるので、ブラウザはそれらを独自の行に置きます。あなたのコード例でのノートを取るために

.fieldName{ 
    font-size: 12px; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 100px; 
    display: inline;  
} 

.fieldInput{ 
    width: 200px; 
    display: inline; 
}