0

私は次のように書きました：

<ul>
    <li>
        <span class="filter">
            <label>Name: </label><input type="text"/>
        </span>
    </li>
    <li>
        <span class="filter">
            <label>Id: </label><input type="text"/>
        </span>
    </li>
</ul>​

CSSを次のように使用します。

span.filter{
    width: 50px;
}
input{
    text-align: right;
}
label{
    text-align: left;
}
ul{
    list-style: none;
}​

しかし、結果はこのフィドルに示されているとおりです。フロートの使用を提案する人もいますが、なぜこれが機能しないのですか?

4

3 に答える 3

3

使用する必要はありませんfloat。それを機能させるには多くの方法があります：

例えば。

label{
    display: inline-block;
    width: 200px;
    text-align: left;
}

http://jsfiddle.net/krL7z/7/

于 2012-11-26T08:13:32.580 に答える
1

フロートを使用してこの効果を実現したい場合は、ラベルの表示プロパティをブロックに設定し、幅を宣言し、左にフロートします。次に、入力を左にフロートさせ、ラベル要素を clear:left にして、すべてが 1 行に収まらないようにします。

それで：

label{
display:block;
width:50px; /*arbitrarily determined */
float:left;
clear:left;
} 

input{
float:left; 
}

このフィドルで結果を参照してください。

xiaoyi の回答に示されているように、display:inline-block (したがって少ないコード) を使用してこれを行うこともできます。

もう 1 つの方法は、テーブル セルを使用することです (意味的にフォームに適していると考える人もいますが)、これは通常、レイアウトに依存したいものではありません。

于 2012-11-26T08:02:18.910 に答える
1

サポートするブラウザー (Explorer IE7 以上) と、他のすべての Firefox、Chrome、Opera、Safari ... を制限できることがわかっている場合は、display:table と display:table を使用できます。 -cell を使用して、実際のテーブル マークアップを使用せずに、セルをテーブル形式でレイアウトします。

span.filter 
{    
    display:table;
}
span.filter label, span.filter input
{    
    display:table-cell;
}
于 2012-11-26T08:13:52.903 に答える