我正在尝试将我的导航置于响应式设计的中心。当视口(viewport)被拉伸(stretch)到大约 900 像素时,3 个导航标题看起来偏离了页面上其余内容的中心。有人有办法解决这个问题吗?
HTML:
<header>
<div id="logo">
<a href="#">
<img src="images/logo_55x73.png" alt="StudioMed" />
</a>
</div>
<nav>
<ul>
<li><a href="#">Work</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Journal</a></li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
}
#logo {
padding: 2.3em 1.1em 1.7em 1.1em;
text-align: center;
}
nav {
display: block;
}
nav ul {
text-align: center;
}
nav li {
font-size: 0.95em;
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1%;
}
nav a {
text-decoration: none;
display: inline-block;
width: 122px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width:767px) {
header {
float: left;
overflow: auto;
width: 100%;
}
#logo {
float: left;
width: 10%;
}
nav ul li {
float: left;
width: 22.1354166666667%;
margin-top: 50px;
font-size: 1em;
}
}
提前致谢
最佳答案
您的 UL 左侧可能有一些默认填充。 尝试将此添加到您的 CSS:
nav ul {
...
padding: 0px;
}
编辑:
上面的填充问题似乎没有解决您的问题。
这里有一个不同的理论:
每个 LI 的宽度相同,但每个 LI 内的文本可能不同。这可能会导致菜单看起来偏离中心,即使 LI 居中也是如此。
明白我的意思了吗?
关于html - 中心响应式导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16843157/