4

通常、フローティング HTML 要素は左から右に流れ、コンテナの幅に達すると次の行に落ちます。

底に浮かせる方法があれば知りたいです。つまり、要素は互いに上に積み重なるはずです。

この例は、 http://jsfiddle.net/duGVa/を明確にするだろうと思います

次の行にある要素、つまり LI-6 は、他の 5 つの要素の上にある必要があります。要素 1 ～ 5 は、コンテナー UL の底に接触する必要があります。

ありがとうございました。

ここに画像の説明を入力

4

4 に答える 4

4

あなたは恐ろしくカンニングすることができます...

CSS 変換を使用して UL と LI の両方を反転すると、必要な結果が得られます。

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

このフィドルを参照してください（Firefox、Chromeでテスト済み）

于 2012-07-12T12:36:21.613 に答える
0

リストを部門に配置すると、リストを1つ<div>の単位として機能させることができます。

次に、CSSを使用して、各リストアイテム<li>を強制的に中央に配置できます。

最後に、各リストアイテムが互いに整列していることを確認するために<li>、CSSで幅が同じになるように設定できます。

それはスタックとして表示されるはずです。これが例です。

<style type='text/css'>
#stack{
align: left;
}
#stack > ul {
align: center;
}
#stack > ul > li{
align: center;
width: 80px;
border: 2px solid black;
text-decoration: none;
}
</style>

<div id="stack">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
于 2012-07-12T12:36:48.827 に答える
0

次のようなことを達成するには、実用的に管理する必要があります。

<ul>
    <li>LI 6</li>
</ul>
<ul>
    <li>LI 1</li>
    <li>LI 2</li>
    <li>LI 3</li>
    <li>LI 4</li>
    <li>LI 5</li>
</ul>

これをチェックして

于 2012-07-12T12:27:26.917 に答える
0

meouw下記の彼の良い答えに感謝します

引用元meouw

/* Only showing mozilla and webkit transforms */
ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
   -moz-transform: scaleY(-1);
   -webkit-transform: scaleY(-1);
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}

しかし、クロスブラウザソリューションは次のとおりです。

/* For All browsers : Chrome. Firefox, Mozilla, IE7+(tested), Opera */

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

IE 9 の場合、以下でフィルタを使用できます:flipv(); 参照を参照してください

于 2012-07-13T05:07:17.727 に答える