-2

我希望我的最后一个列表项在右侧有圆角，但它不起作用。我自己无法弄清楚，尝试了一切并到处搜索。

#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;
}
<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>

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

4

1 回答 1

7

您的问题是您没有关闭<a>标签，而是打开了一个<a>甚至不是有效的嵌套标签。

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

只需关闭您的<a>标签。

<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>

JSFiddle 示例

于 2014-12-22T16:09:29.130 回答