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

您可以使用表行为来实现此目的。将其视为表，并使用css将每个前缀设为表中的cell。更改单元格宽度后，所有其他单元格宽度将像表格一样自动调整。

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>

在无序列表中对齐项目

1 个答案: