主页 / 问题 / 1498574
Accepted
Teoom07
Asked:2023-02-21 19:31:21 +0800 CST2023-02-21 19:31:21 +0800 CST

如何正确列出清单

  • 772

大家好。

有必要用.list列表的两列制作两个 div，以便它们共享彼此之间的空间，但是会出现一个问题，当.list第二个列表中的第一个 div 中没有足够的文本时，文本会飞得很远，但是它有必要像第二个 diva 中的列那样缩进.list。

在那里，由于文本的缘故，有更多，因此列表变得更接近第一个列表。

这可以以某种方式完成吗？

我想在不设置绝对值的情况下保持适应性。

ul li {list-style: none;}

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

html

1 个回答

  1. Best Answer

    设置标签尺寸

     ul li {
  list-style: none;
 }

 ul {
  width: 300px;
 }

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
    <div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

    • 1

相关问题