CODEWITHSUNDEEP
javascripthtmlcsshtml-lists
Tom
Tom

Reputation: 4033

Align item inside of unordered list

I have a list where each item including a prefix and a bigger title.

The prefixes are unequal in length, how do I still achieve to make each prefix's container of same length to have the titles aligned (without defining a static width)?

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>

Upvotes: 0

Views: 66

Answers (1)

Thusitha
Thusitha

Reputation: 3511

You can achieve this using table behavior. Think it as a table and using css we can make each prefix a cell in a table. When a cell width is changed all the other cell widths' will be automatically adjusted like a 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>

Upvotes: 1

Related Questions