Question

我试图将它包装在div中，我尝试了一堆不同的代码，但我无法实现。我将不胜感激。

我不知道我在哪里弄错了。

.menu2 {
  list-style: none;
  justify-content: center;
  align-items: center;
}
.menu2 li {
  float: left;
  width: 80px;
  padding: 1px;
}
.menu2 > li a {
  display: block;
  font-size: 0.8em;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #333333;
  border: 1px solid #d6d6d6;
  transition: all ease .5s;
}
.menu2:hover > li a {
  opacity: .5;
  transition: all ease .5s;
}
.menu2 > li:hover a {
  opacity: 1;
  color: #D2383C;
  border-color: #D2383C;
}

<ul class="menu2">
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
<li><a href="">2012</a></li>
</ul>

Answer 1

float: left会左对齐您的列表项。您可以使用display: inline-block来实现与浮动类似的效果。然后将text-align: center放在.menu2上，而不是align-items。

.menu2 {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.menu2 li {
  display: inline-block;
  width: 80px;
  padding: 1px;
}
.menu2 > li a {
  display: block;
  font-size: 0.8em;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #333333;
  border: 1px solid #d6d6d6;
  transition: all ease .5s;
}
.menu2:hover > li a {
  opacity: .5;
  transition: all ease .5s;
}
.menu2 > li:hover a {
  opacity: 1;
  color: #D2383C;
  border-color: #D2383C;
}

<ul class="menu2">
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
<li><a href="">2012</a></li>
</ul>

请注意，display: inline-block的警告是项目之间的空格会在菜单项之间产生可视空间（请注意我的代码段与OP的项目之间的差距更大）。有几种可能的解决方案：

（1）将所有li放在同一行，</li><li>之间没有空格（但这在源中看起来不太好

<ul class="menu2">
<li><a href="">2014</a></li><li><a href="">2013</a></li><li><a href="">2012</a></li>
</ul>

（2）通过将空白放在注释中（也看起来很奇怪）来达到相同的效果，例如。

<ul class="menu2">
<li><a href="">2014</a></li><!--
--><li><a href="">2013</a></li><!--
--><li><a href="">2012</a></li>
</ul>

（3）在font-size: 0;上指定.menu2并覆盖font-size上的.menu2 li。

Answer 2

您只需使用<ul>和margin: auto设置display: table标记的样式。请注意，display: table在旧的IE浏览器中可能效果不佳（请参阅MDN documentation）。

.menu2 {
  list-style: none;
  margin: auto;
  display: table;
  padding-left: 0; /* reset the left padding of <ul> */
}
.menu2 li {
  float: left;
  width: 80px;
  padding: 1px;
  
}
.menu2 > li a {
  display: block;
  font-size: 0.8em;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #333333;
  border: 1px solid #d6d6d6;
  transition: all ease .5s;
}
.menu2:hover > li a {
  opacity: .5;
  transition: all ease .5s;
}
.menu2 > li:hover a {
  opacity: 1;
  color: #D2383C;
  border-color: #D2383C;
}

<ul class="menu2">
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
<li><a href="">2012</a></li>
</ul>

对于现代网站，您可以利用<nav> HTML标记来制作菜单。示例可用here。

如何居中对齐<ul> <li>作为菜单？

2 个答案: