Question

我在下面使用HTML和CSS进行水平菜单演示。如您所见，我在li标签上放置了一个右边框来分隔菜单选项。但是我不希望在最后一个菜单选项上有边框，所以我使用了span样式来尝试阻止它显示。但它似乎对我不起作用。有人可以帮忙吗？

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#menu a {
text-decoration:none;
color:black;
font-weight:bold;
}

#menu ul {
display:inline;
list-style:none;
padding:0px;
}

#menu li {
display:inline;
margin:0px;
border-right: solid black thin;
padding-right:5px;
color:black;
}



</style>

</head>

<body>

<div id="menu">
<ul>
    <li><a href="/">About</a></li>
    <li><a href="/">Service</a></li>
    <li><a href="/">Prices</a></li>
    <span style="border-right:none"><li><a href="/">Contact Me</a></li></span>
</ul>
</div>

</body>
</html>

Answer 1

两个问题：

A）您无法将li包裹在span内，因为列表（ol）不能包含li以外的任何内容。（这里要学习的第一件事是验证您的HTML代码：http://validator.w3.org/）

B）边框位于li，您想要从span移除边框。您需要从li本身删除边框，例如：

<li style="border-right:none"><a href="/">Contact Me</a></li>

然而，如果你在样式表中直接定义最后一个元素不应该有边框，那就更容易了：

#menu li:last-child {
   border-right: none;
}

这样您就不必担心自己哪个li是最后一个，即使您决定重新排序项目或添加新项目。

Answer 2

你必须考虑李，而不是跨度。试试这个：

<span><li style="border-right:none"><a href="/">Contact Me</a></li></span>

Answer 3

那是因为你在跨度里面有一个li标签！只需删除跨度内的li标签即可。例如：http://jsfiddle.net/8cUmx/

Answer 4

删除span标记并添加此css

#menu li:last-child {
 border-right:none;
}

跨度标签不起作用

4 个答案: