所以我有一个移动网站,其中导航栏是有序的,悬停在背景颜色上与设计不成比例,单击时看起来很糟糕,我想将它居中而不必弄乱代码。
现在是这样的:
我试图修改代码并去掉了 float :留给一个无,然后导航似乎乱七八糟。
这是移动 CSS 代码:
.mainBanner nav{
position: absolute;
/*text-align: center;*/
top: 15%;
left: 15%;
font-size: 1.190em;
font-weight: bold;
height: 40px;
line-height: 30px;
margin: 0 auto 30px 50px;
font-family: 'lato-Reg', sans-serif;
}
.mainBanner nav ul {
list-style: none;
margin: 0 auto;
}
.mainBanner nav ul li {
float: left;
display: inline;
}
.mainBanner nav a:link, .mainBanner nav a:visited {
color: #ecf0f1; /* Color of the font in the nav*/
display: inline-block;
height: 30px;
padding: 5px 30px;
text-decoration: none;
}
.mainBanner nav a:hover, .mainBanner nav a:active,
.mainBanner nav .active a:link, .mainBanner nav .active a:visited {
background: #16a085;
color: #fff;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow: none !important;
}
最佳答案
用这个更新你的代码让我们看看
//comment this line
.mainBanner nav ul li {
/*float: left; */
display: inline;
}
//uncomment this line
.mainBanner nav{
text-align: center;
}
关于css - 我将如何取消对移动页面导航栏的排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23088230/