Question

我有一个简单的导航栏和一些CSS的样式。

导航栏的顶部有一个白色边框，用于内部链接。

对于两个外部链接，我希望左边有一个边框用于左边链接，右边有一个边框用于右边链接，还有弯角但我不知道如何将CSS集中在这两个li上

我试图给李一个家的id，但那不起作用

我也尝试将弯角代码放在ul和NavBar标签中。这是我尝试过的

<div id="NavBar">
<ul>
<li id="Home"><a href="Index.php"><strong>Home</strong></a></li>
<li><a href="AboutUs.php"><strong>About Us</strong></a></li>
<li><a href="Products.php"><strong>Products</strong></a></li>
<li><a href="Policies.php"><strong>Policies</strong></a></li>
<li id="ContactUs"><a href="ContactUs.php"><strong>Contact Us</strong></a></li> 
</ul>

这就是我试图把重点放在一个家里的CSS。

#NavBar li {
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;

   }
#NavBar li Home {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    border:solid 3px #FFF;
    border-bottom:0px;
    width:20%;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;

     }

感谢您的帮助

创建了一个JSFiddle：https://jsfiddle.net/b4ejndkz/

Answer 1

如果您要使用width:20% 并指定边框宽度，则需要box-sizing:border-box;，这样才会考虑边框大小确定总宽度。否则它会分裂成2行，就像现在一样。

然后，您可以通过执行以下操作设置特定边角以应用边框半径：border-radius: 5px 0 0 0;（左上角，右上角，右下角，左下角）。

您可以使用ID选择器https://jsfiddle.net/b4ejndkz/2/执行此操作...或者使用CSS选择器:first-child和:last-child来选择列表的第一个和最后一个元素：

#NavBar li {
   box-sizing:border-box;
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;
}

#NavBar li:first-child {
    border-radius: 5px 0 0 0;
}

#NavBar li:last-child {
    border-radius: 0 5px 0 0;
}

https://jsfiddle.net/b4ejndkz/1/

Answer 2

使用：first-child和：last-child。

要仅访问列表的第一个或最后一个元素，请执行以下操作：

ul li:first-child {
    Styles for first element
}

ul li:last-child {
    Styles for last element
}

通过它，您可以将所需的样式应用于匹配的链接。

用CSS弯曲的角落

2 个答案:

使用：first-child和：last-child。