css - 使边框均匀围绕 Bootstrap 导航栏？

Question

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

我刚刚创建了一个 site用于练习，但我对导航栏周围的边框有疑问。

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

@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
• 第一个 child 的左边框是 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;
}} 

What you are trying is right but the element which you are applying :first-child and :last-child are wrong you should apply for li not for a Try the above CSS.