Отображать элементы списка по центру с динамической высотой

Question

Поэтому я пытаюсь сделать элементы списка одинакового размера и выровнять содержимое по центру. Все, что я получаю, это большой беспорядок. Кроме того, еще одна важная вещь: я хочу, чтобы ссылка тега a работала со всем элементом списка, то есть со всем квадратом. Право не ссылка работает только если вы нажмете только на тег a. Можно ли это сделать, не меняя структуру HTML?

Итак, основные вещи:

1. Высота элемента <li> может варьироваться,из-за содержимого внутри, но не из-за ширины, и я пытаюсь сделать их все одинаковыми по высоте.
2. Сделать всю область <li> интерактивной, чтобы она перенаправлялась на справочную страницу тега <a>,Без изменения текущей структуры.
3. Центрирование содержимого в теге <li> и не переполнение контейнера.
4. В примере содержимое внутри последнего элемента <li>, тексти тег <a> находится в той же строке. Как я могу правильно сделать их в разных строках?

В приведенном ниже примере это типичная структура, которую мне нужно стилизовать.

.ul {
  display: flex;
}

.test1 {
  display: inline-flex;
  min-height: 100px;
  width: 100px;
  list-style: none;
  background-color: #9affda;
  color: black;
  margin: 0px 10px;
  border-radius: 10px;
  align-items: center;
  vertical-align: top;
}

<ul>
  <li class="test1"><a href="">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1">Test text </li>
  <li class="test1">Test text <a href="">TEST TEST TEST TEST TEST TEST TEST</a></li>
</ul>

Я пробовал несколько подходов, но каждый раз, когда что-то не получалось [, посмотрите на основные вещи, которые я пытаюсь сделать ]. Я пробовал показывать table и table-cell, flex и inline-flex, inline-block и все другие вещи ...

Вывод цели

Синие квадраты <li> элементов. Тег <a> называется link inside, а обычный текст - text inside.

Answer 1

Вы прошли большую часть пути, и мы можем выполнить большинство (но не все) ваших требований, просто используя flex-direction:column.

1. Высота <li> элемент может изменяться из-за содержимого внутри, но не из-за ширины, и я пытаюсь сделать их все одинаковой высоты.

2. Сделать всю область <li> интерактивной,поэтому он будет перенаправлен на справочную страницу тега <a>. Без изменения текущей структуры.

NB - № 2: Это невозможно с CSS , если ссылка составляет 100% ширина / высота li. В этом случае есть отдельный текстовый узел, который означает, что ссылка не (и не может быть) такого размера. Вам понадобится Javascript.

Центрируйте содержимое в теге <li> и не переполняйте контейнер.

В примере содержимое внутри последнего элемента <li>, тексти тег <a> находится в той же строке. Как я мог правильно сделать их в разных строках?

ul {
  display: flex;
  list-style: none;
}

.test1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  width: 100px;
  list-style: none;
  background-color: #9affda;
  color: black;
  margin: 0px 10px;
  border-radius: 10px;
  overflow: hidden;
}

a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}

a:hover {
  background: darkseagreen;
}

<ul>
  <li class="test1"><a href="">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1">Test text </li>
  <li class="test1">Test text <a href="">TEST TEST TEST TEST TEST TEST TEST</a></li>
</ul>

Answer 2

хорошо, во-первых, в вашем css вы пишете ".ul", но у вас нет никакого класса "class =" ul ""!

, если вы пишете в своем css только "ul {} "это меняет все.

тогда, если вы хотите, чтобы весь ваш квадрат был ссылкой, вам нужно изменить порядок написания списка!

это:

<ul>
    <a href="">
        <li> TEST </li>
    </a>
</ul>

и ваш css:

ul {
  display: flex;
}