1

多くの場合、いくつかのラベル（名前、年齢、色を使用できます）とそれぞれの値があります！

これらを2列3行のテーブルに配置すると、値（Steve、19、Redを使用）がすべて同じ水平位置で開始することを確認できます。

また、その列を左揃えにしたい場合、およびラベル列を右揃えにしたい場合。その場合、2つの列はテーブルの中央でうまく一致します。

テーブルを使用せずに、固定幅を設定する必要なしに、これを行うにはどうすればよいでしょうか。

4

4 に答える 4

2

ラベルに固定幅を使用するように解決する必要があります（純粋なCSSルートを使用する場合）。以下は、達成しようとしていることを取得するための最小値です（HTML Dogから取得）。

CSS：

label {
    clear: left;
    float: left;
    width: 7em; /* or whatever length suits */
    text-align: right;
}

HTML：

<form>
    <div><label>Item 1</label><input /></div>
    <div><label>Item 2</label><input /></div>
    <div><label>Item 3</label><textarea></textarea></div>
</form>

固定幅が絶対に必要ない場合は、このjavascript（jQueryを使用）を使用して、上記のCSSから固定幅を削除できます。javascriptをオフにしている人を取得すると、これはひどく見えることに注意してください。

var largestWidth = 0;
$('label').each(
    function() {
        if ($(this).width() > largestWidth) {
            largestWidth = $(this).width();
        }
    });

$('label').each(
    function() {
        $(this).width(largestWidth);
    });

JSFiddleで実例を紹介しました。

あなたが引用したユースケースを考えると、実際にはテーブルがより良い方法だと思いますが、テーブル/div形式の議論についてはほとんどの場合とは異なる意見があります。

于 2010-09-29T16:38:58.850 に答える
1

それを修正するにはjavascriptが必要だと思います。これに対する純粋なCSSソリューションがあるとは思いません。

実際、固定幅での作業は、ラベルの幅が異なる可能性がある多言語サイトで作業する場合、またはテキストサイズなどのブラウザ設定に応じて幅が変更される可能性がある場合に問題になる可能性があります...

于 2010-09-29T16:36:58.837 に答える
0

あなたの言っていることを聞きましたが、表形式のデータはテーブルで問題ないことを思い出してください。

ただし、純粋なCSSを使用してこれを行うには、ラベルと値を左にフロートさせ、後でクリアして、両方の要素を50％幅のブロックを表示するように設定します。

于 2010-09-29T16:35:03.193 に答える
0

代わりに、ULLIリストを使用してこれを調整できます。

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul> 
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li> 
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>



<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>



<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li> 
<ul>
</form>

</fieldset>

css

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;  // or you give width in % here
float:left;
}
于 2010-09-29T16:39:24.580 に答える