html - 显示以动态高度为中心的列表项

Question

所以我试图使列表项大小相等，并在中间对齐内部内容。我得到的只是一团糟。另外，我想要另一件重要的事情 a标签链接在整个列表元素上工作——所以在整个广场上。不对，链接只有在你按下 a 时才有效。仅标记。是否可以在不更改 HTML 结构的情况下做到这一点？

所以主要的事情:

1. <li> 的高度item 可能会有所不同，因为里面的内容，但不是宽度，我试图让它们都具有相同的高度。
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和所有其他种类的东西......

目标输出

蓝色方 block 是<li>元素。 <a>标签称为 link inside常规文本是 text inside .

Answer 1

您完成了大部分工作，我们可以通过使用 flex-direction:column 满足您的大部分(但不是全部)要求.

1. The height of the <li> item can vary, because of the contents inside, but not the width and I am trying to make all of them the same height.

2. Make the whole <li> area clickable, so it would redirect to the <a> tag reference page. Without changing the current structure.

注意 - 第 2 点:这对于 CSS 是不可能的除非链接是 li 的 100% 宽度/高度.在这种情况下，有一个单独的文本节点，这意味着链接不是(也不能)那个大小。您将需要 Javascript。

3. Center the content in <li> tag and don't overflow the container.

4. In the example, the content inside the last <li> element, the text, and the <a> tag is in the same line. How could I properly make them in different lines?

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>