由于某种原因,我的导航菜单没有完全居中
My navigation menu isn't completely centered for some reason
我的导航菜单总是稍微偏离中心点。
像这样>http://i.imgur.com/4sNo8K7.png
#nav {
display: block;
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: yellow;
}
#nav li {
display: inline-block;
padding: 1% 2% 1% 2%;
list-style: none;
background-color: blue;
width: 5%;
min-width: 50px;
}
#nav li a {
color: white;
text-decoration: none;
}
<div id="nav">
<ul>
<li><a href="index">Home</a>
</li>
<li><a href="about">About</a>
</li>
<li><a href="contact">Contact</a>
</li>
</ul>
</div>
您必须重置默认 ul
填充。
#nav ul {
padding: 0;
}
body {
margin: 0;
}
#nav {
display: block;
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: yellow;
}
#nav li {
display: inline-block;
padding: 1% 2% 1% 2%;
list-style: none;
background-color: blue;
width: 5%;
min-width: 50px;
}
#nav li a {
color: white;
text-decoration: none;
}
#nav ul {
padding: 0;
}
<div id="nav">
<ul>
<li><a href="index">Home</a>
</li>
<li><a href="about">About</a>
</li>
<li><a href="contact">Contact</a>
</li>
</ul>
</div>
您的 ul
元素左侧有不需要的填充。
这将修复它:
#nav ul { padding:0; }
我的导航菜单总是稍微偏离中心点。
像这样>http://i.imgur.com/4sNo8K7.png
#nav {
display: block;
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: yellow;
}
#nav li {
display: inline-block;
padding: 1% 2% 1% 2%;
list-style: none;
background-color: blue;
width: 5%;
min-width: 50px;
}
#nav li a {
color: white;
text-decoration: none;
}
<div id="nav">
<ul>
<li><a href="index">Home</a>
</li>
<li><a href="about">About</a>
</li>
<li><a href="contact">Contact</a>
</li>
</ul>
</div>
您必须重置默认 ul
填充。
#nav ul {
padding: 0;
}
body {
margin: 0;
}
#nav {
display: block;
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
background-color: yellow;
}
#nav li {
display: inline-block;
padding: 1% 2% 1% 2%;
list-style: none;
background-color: blue;
width: 5%;
min-width: 50px;
}
#nav li a {
color: white;
text-decoration: none;
}
#nav ul {
padding: 0;
}
<div id="nav">
<ul>
<li><a href="index">Home</a>
</li>
<li><a href="about">About</a>
</li>
<li><a href="contact">Contact</a>
</li>
</ul>
</div>
您的 ul
元素左侧有不需要的填充。
这将修复它:
#nav ul { padding:0; }