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

【问题标题】：How to make li elements the same width while maintaining anchor href functionality如何在保持锚href功能的同时使li元素具有相同的宽度
【发布时间】：2019-08-18 06:58:36
【问题描述】：

我从下面的代码开始：

#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 类定义的填充可能会出现问题，但我不确定如何解决。

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

column flexbox 代码的问题没有定义的高度 并且它的堆叠到 的 auto 高度弹性项目（请参阅删除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>

现在您可以看到li 在通过添加display: block 将navlink 锚元素变为块元素 时占用了所需的空间：

#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 将其水平居中。在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>

【讨论】：