html - リスト項目のフローティング div (ul、li)

Question

<div>すべてに 2 つの s を含むリストがあり、<li>それらを並べてフロートさせたいと考えてい<li>ます。どうすればいいのですか？

<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
            }
            ul {
            }
            li {
            }
            .a {
            }
            .b {
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="a">
                    content
                </div>
                <div class="b">
                    content
                </div>
            </li>
        </ul>
    </body>
</html>

score 4 · Accepted Answer

 *{ margin: 0; padding: 0;}
 li{  width: 100%: display: block; } 
 li:after{ clear: both; } 
 div.a{ width: 49%;  float: left; }
 div.b{ width: 49%;  float: left; }

トリックを行う必要があります。

score 2 · Accepted Answer

divの場合は、左にフロートする必要があり、liはクリアする必要があります。それで：

li
{
    clear: left;
}
.a
{
    float: left;
}
.b
{
    float: left;
}

score 0 · Accepted Answer

0

li { width: 100%;}
.a { float: left;}
.b { float: left;}

于 2008-09-18T15:39:01.230 に答える

score 0 · Accepted Answer

スペース全体を取ることで、100％の幅を意味すると思います。また、リストにスタイルを適用したくないと想定しているため、この例ではスタイルを削除しました。これもハックフリーです。リスト項目に幅とオーバーフローがある限り、何もクリアする必要はありません: 非表示のプロパティ/値のペア。

ul,
li {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    overflow: hidden;
}
li div.a,
li div.b {
    float: left;
}

score 0 · Accepted Answer

確認せずに、これは機能するはずです


LI { width: 100%; }
.a { float: left; }
.b { float: right; }

score -1 · Accepted Answer

li{width:100%;}
.a{}
.b{float: left;}

私のCSSの知識から要求されるようにする必要があります

html - リスト項目のフローティング div (ul、li)

7 に答える 7

Related

Reference