html - CSS:li 不会在 ul 内居中

标签 html css

我试图将列表置于 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/

相关文章:

css - 不是第 n 个子选择器不在 sass 中工作

html - CSS:根据当前颜色更改字体颜色

jquery - 关闭怪癖模式影响网页

html - CSS 右列垂直堆叠不显示

html - CSS 背景颜色在样式表和浏览器中不匹配

Google 跟踪代码管理器中的 Javascript 编译器错误 : this language feature is only supported for ECMASCRIPT6 mode or better

jquery - 如果基于元素高度的语句不触发

html - 如何在鼠标悬停在相应文件名上方时显示图像 - angularjs

javascript - 什么可以使 dojo 上的文本输入/选择位于一切之上?

html - 标题在居中对齐段落的左侧对齐