Question

我希望我的最后一个列表项在右侧有圆角，但它不起作用。无法通过我自己解决这个问题，尝试了所有方法，并在任何地方进行搜索。

＆＃13;

#navigation {
  float: left;
  border: 1px solid #C0C0C0;
  border-radius: 20px;
  background: linear-gradient(#64717E, #E5E3DE);
  box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000;
}
#navigation ul {
  height: 20px;
  margin: 0;
  padding: 0;
}
#navigation ul li {
  padding: 0 15px 0 15px;
  display: inline;
  //		border: 2px solid #C0C0C0;
  background: linear-gradient(#64717E, #C0C0C0, #64717E);
  list-style-type: none;
}
#navigation ul li:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#navigation ul li:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

＆＃13;

<div id="navigation">
  <ul>
    <li><a href="#">start<a></li>
	<li><a href="#">imperdiet<a></li>
	<li><a href="#">condimentum<a></li>
	<li><a href="#">nunc<a></li>
	<li><a href="#">phasellus<a></li>
  </ul>
</div>

＆＃13;

对html和css的其余部分的反馈表示赞赏。

Answer 1

您的问题是，您尚未关闭<a>标记，而是打开嵌套的<a>标记，这甚至不是有效的标记。

这意味着您的ul li:first-child有效，因为您的第一个孩子存在且有效，但<a>标记永远不会关闭，因此浏览器会感到困惑，并且永远不知道aa {{1}是的。

只需关闭last-child代码即可。

<a>

JSFiddle example

ul li last-child radius不工作

1 个答案: