我试图将列表置于 ul 中,但它不起作用。怎么了?我使用了文本中心,但它仍然无法工作。
.mainNav {
background-color: #B00002;
margin-right: auto;
margin-left: auto;
list-style-type: none;
width: 204px;
margin-top: auto;
text-align: center;
}
li {
text-align: center;
}
a {
color: #FFFFFF;
font-size: 33px;
padding-right: 37px;
padding-left: 37px;
text-decoration: none;
}
<body>
<ul class="mainNav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Other</a></li>
</ul>
</body>
最佳答案
您需要将 ul
内边距设置为 0。默认情况下,它设置为 40px。
.mainNav {
background-color: #B00002;
margin-right: auto;
margin-left: auto;
list-style-type: none;
width: 204px;
margin-top: auto;
text-align: center;
padding: 0;
}
li {
text-align: center;
}
a {
color: #FFFFFF;
font-size: 33px;
padding-right: 37px;
padding-left: 37px;
text-decoration: none;
<ul class="mainNav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Other</a></li>
</ul>
关于html - CSS:li 不会在 ul 内居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54843974/