0

次のようなものを達成するために、CSS を使用して可変サイズのデータ​​を対応するラベル (フォーム ラベルではなく、通常のラベル) に揃える最良の方法は何ですか?

       Name: James Bob
Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
             sed diam nonummy nibh euismod tincidunt ut laoreet dolore...
         ID: 007

リスト？ネストされた div? これはテーブルを使えば簡単ですが、テーブルは表形式のデータ以外には常に嫌われます。フローティング div を試してみましたが、中央に結合するのは悪夢です。特に、ラベルやデータの長さが変わる場合はそうです。

4

2 に答える 2

2

ラベルを左に浮かせて、ラベルにwidthormin-widthを使用してみてください

<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />
<label>Blahblah : </label><input type="text" /><br />

label {
   float: left;
   width: 300px; /* You can change this accordingly */
}
于 2013-02-26T15:51:10.707 に答える
1

このjsFiddleの例のようなレイアウトはどうですか？

HTML

<div class="l">Name:</div>
<div class="r">James Bob</div>
<div class="l">Description:</div>
<div class="r">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore...</div>
<div class="l">ID:</div>
<div class="r">007<div>

CSS

.l {
    clear:left;
    float:left;
    width:100px;
    text-align:right;
    padding-right:10px;
}

.r {
    overflow:auto;
}
于 2013-02-26T16:05:01.113 に答える