对齐无序列表中的项目

Question

我有一个列表，其中每个项目都包含一个前缀和一个更大的标题。

前缀的长度不相等，我如何才能使每个前缀的容器具有相同的长度以使标题对齐（没有定义静态宽度）？

ul {
  width: 100%
  list-style-type: none;
  padding: 0;
  margin: 0
}

.prefix {
  text-align: right;
  display: flex;
  align-items: flex-end;
  margin-right: 2rem;
}

li {
    display: flex;
}

h1 {
  font-size: 10vw;
  margin: 0;
  line-height: 1;
}

p {
  font-size: 4vw;
  margin: 0;
  line-height: 1;
}

<ul>
  <li>
    <div class="prefix">
      <p>TESTETST</p>
    </div>
    <div class="text">
      <h1>ONE</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TEST</p>
    </div>
    <div class="text">
      <h1>TWO</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TESTES</p>
    </div>
    <div class="text">
      <h1>THREE</h1>
    </div>
  </li>
</ul>

Answer 1

您可以使用 table 行为来实现此目的。将其视为 table 并使用 css 我们可以使每个前缀成为 table 中的 cell。当更改单元格宽度时，所有其他单元格宽度将像 table.

一样自动调整

ul {
  width: 100% list-style-type: none;
  display: table;
  padding: 0;
  margin: 0
}

.prefix {
  display: table-cell;
  margin-right: 2rem;
}

.text {
  display: table-cell;
}

li {
  display: table-row;
}

h1 {
  font-size: 10vw;
  margin: 0;
  line-height: 1;
}

p {
  font-size: 4vw;
  margin: 0;
  line-height: 1;
}

<ul>
  <li>
    <div class="prefix">
      <p>TESTETST</p>
    </div>
    <div class="text">
      <h1>ONE</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TEST</p>
    </div>
    <div class="text">
      <h1>TWO</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TESTES</p>
    </div>
    <div class="text">
      <h1>THREE</h1>
    </div>
  </li>
</ul>

对齐无序列表中的项目

Align item inside of unordered list

html

javascript

css

html-lists