时间戳

首页 > 解决方案 > 以动态高度为中心显示列表项

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

问题描述

所以我试图使列表项大小相等并在中间对齐内部内容。我得到的只是一团糟。此外，另一件重要的事情是我希望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>

我尝试了多种方法，但每次都会出错[看看我正在尝试做的主要事情]。我尝试了 display tableand table-cell, flexand inline-flex,inline-block以及所有其他类型的东西......

目标输出

目标输出

蓝色方块是<li>元素。<a>标记被调用，link inside常规文本是text inside.

标签： htmlcssflexboxhtml-lists

解决方案

好吧，第一件事是在你的css中，你写了“.ul”，但你没有任何类“class="ul"”！

如果你在你的 CSS 中只写“ul{}”，它会改变一切。

那么，如果你想让你的整个方块成为一个链接，你需要改变你写列表的顺序！

它的 ：

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

和你的CSS：

ul {
  display: flex;
}

推荐阅读