Question

我正在处理一个无序列表。我已经在互联网上搜索了一个很好的教程，但我找不到一个。我希望将其显示为内联，并在每个<li>项之间设置边框线。现在我只是不确定样式列表的标准。我是否使用填充/边距来定位<li>项目？如果是，我是否将其应用于<ul>容器或<li>或<a>？

Answer 1

尝试使用边距，边框和浮动。

<html>
<head>
<style type="text/css">
.liClass
{
  float:left;
  padding-right:10px;
  padding-left:10px;
  border-right:thick double #ff0000;
}
.lastLi
{
  float:left;
  padding-left:10px;
}
</style>
</head>
<body>
<ul>
<li class="liClass">one</li>
<li class="liClass">two</li>
<li class="lastLi">three</li>
</ul>
</body>
</html>

Answer 2

将float:left;应用于<li>并根据需要设置样式。

Answer 3

使用display: inline-block使列表项并排显示（它比float: left更可靠），然后添加边框或您想要的任何其他内容 - 可能是width和一些margin。

Answer 4

您可以使用display: inline-block来避免混乱清除花车：

http://jsfiddle.net/ZehJN/

使用CSS设置列表

4 个答案: