如何在保持锚点 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元素(简介、中间和结尾(的宽度相同，同时保持居中，同时保持锚href功能和完整的悬停功能。我尝试更改li元素和类.navlink宽度无济于事。我也尝试在li而不是.navlink下定义绿色矩形元素，但这只会带来新的问题。

我

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

Answer 1

代码

的问题 列弹性框没有定义的高度及其堆叠到弹性项目的自动高度(请参阅删除li上的margin-top和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>

现在，您可以看到，当navlink锚元素通过添加块元素时，li占用了尽可能多的空间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。此外，通过将其也设置为弹性框并使用justify-content: center来水平居中square。调整li之间的margin，然后就可以了：

#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>