我在我的网站移动版导航栏中的链接对齐时遇到了一些问题。查看桌面版本时,一切正常。它看起来像这样:
代码:
.navbar {
margin-top: 30px;
min-height: 50px;
padding: 0;
background-color: red;
background-image: none;
filter: -;
border: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
*zoom: 1;
}
.navbar-inner {
background-color: fuchsia;
background-image: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin-left: 20px;
background-color: #5593f8;
webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
现在是手机版。目前看起来是这样的:
代码:
@media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
.navbar {
margin-top: 0px;
}
.navbar .nav > li {
float: none;
text-align: center;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin: 0;
}
.navbar .nav {
width: 100%;
background: red;
}
.navbar-inner {
padding: 0;
margin: 0;
}
}
你看到左边那个可以看到紫红色的小缝隙了吗?我不想要那个。我希望链接是width: 100%
,但不知何故这是不可能的。我花了几乎一整天的时间来找出问题所在,但我无法解决这个问题。它不是边距,也不是填充,但它是什么?请帮我。