1

テーブルの1つのセルに表示している名前のリストがあり、それぞれの間にスペースがあります。フォーマット上の理由から、それぞれを独自のテーブルセルに配置することは避けたいと思います。それぞれの名前の上に小さなアバターや写真を載せたいと思います。私は明らかに一人の人をすることができますが、または<img src="photo.gif"><br>name... を使用しています

明らかに、水平ではなく垂直のリストを作成します。明らかにスペースは使えなくなりました。

<br>人々の間隔を空けるために使用できるタグの水平バージョンはありますか？

または、cssでこれを行う方法はありますか？float leftを使用して画像を並べて配置することへの参照をいくつか見つけましたが、テキストがタグに含まれていません。複数のスパンタグを使用することはそれほど魅力的ではないようです。これが私が見つけたimgコードです。

.left{
    float:left;
    margin:0;
    padding:0;
}
4

1 に答える 1

3

次のCSSを使用します。

.horizontalList li {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

通常はブロックとして表示される要素、つまり<LI>、<DIV>などをインラインで表示するように作成できます。余白は、各要素の間に少しスペースを与えるために追加されています。

たとえば、

<UL class="horizontalList">
    <LI><img src="img1.png"/>Person 1</LI>
    <LI><img src="img2.png"/>Person 2</LI>
    <LI><img src="img3.png"/>Person 3</LI>
    <LI><img src="img4.png"/>Person 4</LI>
</UL>

同様に、画像のスタイルを変更して、インラインではなくブロックとして表示することができるため、このCSSを追加して次のことができます。

.horizontalList img {
    display: block;
    margin-bottom: 10px;
}
于 2012-04-19T22:32:37.070 に答える