如何在保持锚点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

列flexbox的代码问题没有定义的高度，它的堆叠高达flex项的自动高度（请参阅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锚元素通过添加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水平居中，使其成为弹性箱并使用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>