Html 使用CSS设置列表样式_Html_Css

Html 使用CSS设置列表样式

html css

Html 使用CSS设置列表样式,html,css,Html,Css,我正在处理一份未排序的列表。我已经在互联网上搜索了一个好的教程，但我找不到。我想以内联方式显示它，并在每个项之间有一条边框线。现在我只是不确定样式列表的标准。我是否使用填充/边距来定位项？如果是，我是否将其应用于容器或或应用浮动：左侧到并根据需要设置样式。使用显示：内联块使列表项并排显示（比浮动：左更可靠），然后添加边框或任何您想要的内容-可能是宽度和一些边距您可以使用显示：内联块来避免清除浮动：尝试使用边距、边框和浮动 <html> <head> <style

我正在处理一份未排序的列表。我已经在互联网上搜索了一个好的教程，但我找不到。我想以内联方式显示它，并在每个

项之间有一条边框线。现在我只是不确定样式列表的标准。我是否使用填充/边距来定位

项？如果是，我是否将其应用于

容器或

或

应用

浮动：左侧到并根据需要设置样式。
使用显示：内联块
使列表项并排显示（比浮动：左
更可靠），然后添加边框或任何您想要的内容-可能是宽度
和一些边距
您可以使用显示：内联块
来避免清除浮动：
尝试使用边距、边框和浮动
<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>


李格拉斯先生
{
浮动：左；
右边填充：10px；
左侧填充：10px；
右边框：厚双#ff0000；
}
拉斯特利先生
{
浮动：左；
左侧填充：10px；
}

一个
两个
三个

但是如果我将其应用于，那么边界线就会溢出控件。为什么不在样式中使用ul和li？@user1174762-原因有二。如果使用了ul
和li
，那么它会影响范围广泛的html对象，我可能希望在其他地方不使用这种样式。此外，如果需要，我可以动态地为html对象分配类名。此外，使用ul
和li
实际上比使用类名慢，因为css必须搜索dom中的每个ul，然后是每个li。欢迎使用SO。如果你的问题得到了回答，那么请回答，否则就不清楚你是否已经对提供的答案之一感到满意。