我正在开发一个投资组合网站模板，该模板在 >= 1024 像素的显示屏上将在左侧有一个垂直的全高菜单，在移动显示屏上将有一个水平的、全 Angular 的下拉菜单。问题是我的下拉菜单项(文本本身，而不是下拉菜单)稍微向右偏移并且没有居中。我玩过我的 CSS，但我似乎无法弄明白。谁能帮忙？
$('#nav-status').click(function(e) {
e.preventDefault();
$('#navigation').toggle();
});html,
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
overflow-x: hidden;
font-family: "Oswald", sans-serif;
color: white;
text-align: center;
}
/*mobile rules*/
@media screen and (max-width: 1023px) {
#nav-status {
display: block;
width: 100%;
height: 32px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.75);
}
ul {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
color: white;
}
li h1 {
font-size: 1.5em;
}
ul li {
width: 100%;
min-height: 32px;
padding: 2px;
display: block;
position: relative;
text-align: center;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
}
/*desktop rules*/
@media screen and (min-width: 1024px) {
#nav-status {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
position: fixed;
overflow: hidden;
}
li h1 {
font-size: 3em;
}
ul li {
color: white;
margin: auto;
width: 50%;
padding: 2px;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
font-style: italic;
}
}<body>
<div>
<a href="#" id="nav-status"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat"></a>
<ul id="navigation">
<li>
<h1>Explore</h1>
</li>
<li>
<a href="#">Web Pages</a>
</li>
<li>
<a href="#">Games</a>
</li>
<li>
<a href="#">Productivity</a>
</li>
<li>
<a href="#">Project 4</a>
</li>
</ul>
</div>
</body>最佳答案
您的 ul 元素有一些填充。
只需执行 ul { padding : 0; }。就是这样。
关于css - 如何使我的下拉菜单项居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48698054/