Question

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

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

我可以使用<br>标签的横向版本来区分人员吗？

或者，有没有办法用css做到这一点？我发现了一些使用float left并排放置图像的引用，但是，文本不在标签中。使用多个span标签似乎并不那么吸引人。这是我找到的img代码。

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

Answer 1

使用以下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;
}

html水平两元素列表

1 个答案: