Question

我正在尝试将列表集中在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>

Answer 1

您需要将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>

Answer 2

只需删除ul中的填充。

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
  text-align: center;
  padding: 0; /* HERE */
}

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>

Answer 3

只需从li和.mainNav中删除文本对齐方式

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
}

li {
}

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>

CSS：我不会在ul内部居中

3 个答案: