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

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-No.2：CSS 除非无法实现，链接的宽度/高度为li的100％。在这种情况下，存在一个单独的文本节点，这意味着链接的大小不是（也不能是）该大小。您将需要Javascript。

3. 将<li>标记中的内容居中，不要使容器溢出。

4. 在示例中，最后一个<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;
}