这是我的第一篇文章,尽管我已经从 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
- 第一个子左边框为 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 forli
not fora
Try the above CSS.
关于css - 让 Bootstrap 导航栏周围的边框均匀?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29740774/