使边框均匀在引导导航栏周围

Question

这是我的第一篇文章，尽管我已经从Stack Overflow中受益了很长一段时间。

我刚刚创建了一个练习网站，但是导航栏周围的边框有问题。

这是我正在使用的复杂代码：

@media (min-width: 768px) {
.navbar-nav > li > a:first-child {
    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}
@media (min-width: 768px) {
.navbar-nav > li > a:last-child {
    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}
@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}} 

目标是一直有一个 2px 的边框。

不幸的是，这导致了一些问题——

• 中间边框为 3px
• 第一个子项左边框为 1px。（如果您单击"关于"链接并移动焦点，这一点很明显。

Answer 1

CSS

@media (min-width: 768px) {
.navbar-nav > li:first-child > a {
    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}
@media (min-width: 768px) {
.navbar-nav > li:last-child > a {
    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}
@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}} 

您正在

尝试的是正确的，但是您正在应用的元素:first-child并且:last-child是错误的，您应该申请li而不是a请尝试上述CSS。