我的下拉菜单有问题。我在我的 Ul 行中添加了一个填充,以便我的菜单在中心对齐,但之后下拉元素将不会对齐。我确定问题出在我的 CSS 中,但我将包括 HTML 和 CSS。有人告诉我有些代码是多余的,但对于这个问题我想保持原样。
body {
background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg') no-repeat;
Background-size: cover;
font-family: arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left:70px;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: white;
display: in-line;
}
ul li a:hover {
background-color: gray;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<htlm>
<link href='style2.css' rel='stylesheet'>
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>About Me</a></li>
<li><a>About My Project</a></li>
</ul>
</li>
<li><a>Gallery</a></li>
<li><a>Contact</a></li>
<li><a>News</a>
<ul>
<li><a>Tech News</a></li>
<li><a>World News</a></li>
<li><a>Science News</a></li>
</ul>
</li>
<li><a>Lessons</a></li>
</ul>
</html>
最佳答案
您没有为第二个 ul 重置 -webkit-padding-start。
您可以在这里找到更多信息:http://css-infos.net/property/-webkit-padding-start
HTML
body {
background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg') no-repeat;
Background-size: cover;
font-family: arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 70px;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: in-line;
}
ul li a:hover {
background-color: gray;
}
ul li:hover ul {
display: block;
}
ul li ul {
-webkit-padding-start: 0;
-moz-padding-start: 0;
display: none;
}
ul li ul li a {
display: block;
}
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>About Me</a></li>
<li><a>About My Project</a></li>
</ul>
</li>
<li><a>Gallery</a></li>
<li><a>Contact</a></li>
<li><a>News</a>
<ul>
<li><a>Tech News</a></li>
<li><a>World News</a></li>
<li><a>Science News</a></li>
</ul>
</li>
<li><a>Lessons</a></li>
</ul>
关于html - CSS 下拉菜单项不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47523442/