如何在保持锚href功能的同时使li元素具有相同的宽度

Question

我从下面的以下代码开始：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  padding-left: 0;
}
li {
  margin-top: 40px;
  text-align: center;
}
.navlink {
  text-decoration: none;
  color: white;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
}
a:hover {
  background-color: #66DE66;
}

<div id = "square">
  <ul>
    <li><a class = "navlink" href = "#">Introduction</a></li>
    <li><a class = "navlink" href = "#">Middle</a></li>
    <li><a class = "navlink" href = "#">End</a></li>
  </ul>
</div>

我需要li元素（Introduction，Middle和End）具有相同的宽度，同时保持居中并保持锚点href的功能和完整的悬停功能。我尝试将li元素和.navlink类的宽度更改为无济于事。我也尝试过在li而不是.navlink下定义绿色矩形元素，但这带来了新的问题。

我怀疑为.navlink类定义的填充可能会出现问题，但我不确定如何。

Answer 1

列flexbox 的代码问题没有定义的高度，并且其堆叠到 auto 高度弹性项目（请参见删除margin-top上的li和ul上的相对翻译）：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  /*position: relative;
  bottom: 30px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  padding-left: 0;
}
li {
  /*margin-top: 40px;*/
  text-align: center;
}
.navlink {
  text-decoration: none;
  color: white;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
}
a:hover {
  background-color: #66DE66;
}

<div id = "square">
  <ul>
    <li><a class = "navlink" href = "#">Introduction</a></li>
    <li><a class = "navlink" href = "#">Middle</a></li>
    <li><a class = "navlink" href = "#">End</a></li>
  </ul>
</div>

现在，当通过添加li使navlink锚元素成为 block元素时，您会看到display: block占用了所需的空间：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  /*position: relative;
  bottom: 30px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  padding-left: 0;
}
li {
  /*margin-top: 40px;*/
  text-align: center;
}
.navlink {
  text-decoration: none;
  color: white;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  display: block; /* added */
}
a:hover {
  background-color: #66DE66;
}

<div id = "square">
  <ul>
    <li><a class = "navlink" href = "#">Introduction</a></li>
    <li><a class = "navlink" href = "#">Middle</a></li>
    <li><a class = "navlink" href = "#">End</a></li>
  </ul>
</div>

现在，您可以制作ul和inline-flex元素，使其仅占用所需的空间 ，然后删除align-items: center。同样，通过将square设置为Flexbox使其水平居中，并使用justify-content: center。在margin和您要去的地方调整li：

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
  display: flex; /* made this a flexbox */
  justify-content: center; /* align horizontally */
}

ul {
  /*position: relative;
  bottom: 30px;*/
  display: inline-flex; /* changed to inline flex */
  flex-direction: column;
  /*align-items: center;*/
  list-style-type: none;
  padding-left: 0;
}

li {
  margin-top: 10px; /* changed */
  text-align: center;
}

.navlink {
  text-decoration: none;
  color: white;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  display: block; /* added */
}

a:hover {
  background-color: #66DE66;
}

<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>