2

各行にul最大 3 つの aを表示したいと考えています。liそれぞれliに同じ幅の垂直方向の中央に画像が含まれているので、これは簡単だと思いました。ただし、オーバーフローを止めることはできません。

ここに画像の説明を入力

代わりに、4 番目の画像を新しい行にクリアしたいと思います。これが私のコードです：

<ul>
    <li><a href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>
    <li><a href="#"><img src="4.jpg"></a></li>
</ul>​

ul {
    border-spacing: 2px;
    width: 150px;
    background: red;
}

li {
    height: 48px;
    background: #000;
    display:table-cell;
    vertical-align:middle;
}
img {
    width: 48px;
    display:block;
    vertical-align:middle;
}​

どうすればこれを解決できますか?

更新:これは、より明確な例を含む jsfiddleです。

4

2 に答える 2

1

オーバーフローを設定してみましたか？

ul {
    border-spacing: 2px;
    width: 150px;
    background: red;
    overflow-x:hidden
}

「オーバーフロー」を次の行に移動するには、UL を 3 つの画像と同じ幅にし、li で float:left を使用して、li の幅を設定します。

ul {
    width:400px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
}

ul li {
    width:200px;
    height:200px;
    display:block;
    float:left;
}
于 2012-12-20T16:21:32.530 に答える
0

http://jsfiddle.net/8Pvtb/1/liをフロートするようにsに伝えます

li {


   height: 48px;
    background: #000;
    display:table-cell;
    float: left;
    vertical-align:middle;
    border-spacing: 12px;
}

しかし、なぜあなたが欲しいdisplay:table-cellのか理解できません。そうではありません。私は使うだろうinline-block

http://jsfiddle.net/8Pvtb/5/

ul {
    border-spacing: 2px;
    width: 155px;
    background: red;
}

li {
    height: 48px;
    background: #000;
    display: inline-block;
    vertical-align:middle;
    border-spacing: 12px;
}
img {
    width: 48px;
    vertical-align:middle;
}​
于 2012-12-20T16:28:10.400 に答える