3

ここに画像の説明を入力

<div id="div1">

    <label class="someClass1">Price 1</label>
    <label class="someClass1">Price 2</label> 
    <label class="someClass1">Price 3</label> 
    <label class="someClass1">Price 4</label> 
</div>
<div id="div2">
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
</div>

私は2つの部門を持っています。1 つの div には<label>要素が含まれ、別の div には<input>要素が含まれます。2 つの div は水平方向に配置されます。各ラベルの下に入力があるように、ラベルと入力要素を垂直に揃える必要があります。

<label>および<input>要素を<table>行/列に配置することで、上記の要件を達成できます。しかし、私はそれらを使用する必要があります<div>。

誰かがこれについて私を助けてくれますか?

4

3 に答える 3

3

短い答え、このCSSを試してください

#div1 label.someClass1 { display: inline-block; margin: 0 5px; }
#div1 label.someClass1, #div2 input.someClass2 { width: 100px; }
#div2 input.someClass2 { margin: 0 0 0 10px; }

長い答え、あなたの質問で描いた正確な外観を作るには、HTML5プレースホルダー属性とCSS3ボーダー半径を使用してください：

#div1 label {
  display: inline-block;
  font-weight: bold;
  margin: 0 5px;
}
#div1 label, #div2 input {
  width: 100px;
}
#div2 input {
  border-radius: 5px; -webkit-border-radius: 5px;
  border-width: 1px;
  padding: 2px;
  margin: 0 0 0 10px; 
}

.

<div id="div1">
    <label>Price 1</label>
    <label>Price 2</label> 
    <label>Price 3</label> 
    <label>Price 4</label> 
</div>
<div id="div2">
    <input type="text" placeholder="Price"/>
    <input type="text" placeholder="Price"/>
    <input type="text" placeholder="Price"/>
    <input type="text" placeholder="Price"/>
</div>

CSS3 効果を微調整するには、css3generatorを参照してください。

于 2013-04-05T06:57:13.610 に答える