Как сделать элементы 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 не имеет определенной высоты и не может быть увеличена до auto высоты элементов 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>