1

我有一个名称列表，显示在表格的一个单元格中，每个单元格之间有一个空格。出于格式化原因，我想避免将每个都放在自己的表格单元格中。我现在想在每个名字上方放一个小头像或照片。我显然可以做一个人，<img src="photo.gif"><br>name... 但使用
或

显然会创建一个垂直而不是水平的列表。我显然不能再使用空格了。

是否有任何水平版本的<br>标签可以用来分隔人员？

或者，有没有办法用css做到这一点？我发现了一些关于使用左浮动并排放置图像的参考，但是，文本不在标签中。使用多个跨度标签似乎并不那么吸引人。这是我找到的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 回答