When making a list, how can I make the multi-line sentence be even with the start of the other sentences?

Question

As you can see at the bullet points 3 and 5, the sentence goes onto the next line and doesn't match up

my code:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
  color: #4ab847;
  font-weight: bold;
  line-height: 1.5em;
}

<ul>
  <li>Tehniskā palīdzība 24/7</li>
  <li>Neierobežots norbraukums</li>
  <li>Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā</li>
  <li>Civiltiesiskā atbildība</li>
  <li>Apdrošināšana avāriju un tehnisku bojājumu gadījumiem</li>
  <li>Apdrošināšana zādzību gadījumā</li>
</ul>

score 1 · Accepted Answer · answered Feb 18 '20 at 13:21

Here is one way you can solve this.

ul {
  list-style: none;
}
ul li {
  position: relative;
  padding-left: 20px;
}
ul li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '✓';
  color: #4ab847;
  font-weight: bold;
  line-height: 1.5em;
}

<ul>
  <li>Tehniskā palīdzība 24/7</li>
  <li>Neierobežots norbraukums</li>
  <li>Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā</li>
  <li>Civiltiesiskā atbildība</li>
  <li>Apdrošināšana avāriju un tehnisku bojājumu gadījumiem</li>
  <li>Apdrošināšana zādzību gadījumā</li>
</ul>

Please let me know if this helps.

score 0 · Answer 2 · answered Feb 18 '20 at 13:20

You could use display: flex on list-items to vertically align the text

ul {
  list-style: none;
}

ul li { 
   line-height: 1.5;
   display: flex; 
   align-items: flex-start }

ul li:before {
  content: '✓';
  margin-right: .5em;
  color: #4ab847;
  font-weight: bold;
}

<ul>
  <li>Tehniskā palīdzība 24/7</li>
  <li>Neierobežots norbraukums</li>
  <li>Maiņas automašīna satiksmes negadījuma <br />vai zādzības gadījumā</li>
  <li>Civiltiesiskā atbildība</li>
  <li>Apdrošināšana avāriju un tehnisku bojājumu <br />gadījumiem</li>
  <li>Apdrošināšana zādzību gadījumā</li>
</ul>

score 0 · Answer 3 · answered Feb 18 '20 at 13:26

The below CSS will match the multiline sentence.

ul {
  list-style: none;
}

ul>li {
  position: relative;
  padding-left: 20px;
}

ul>li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ab847;
  font-weight: bold;
  line-height: 1.5em;
}

<ul>
  <li>Tehniskā palīdzība 24/7</li>
  <li>Neierobežots norbraukums</li>
  <li>Maiņas automašīna satiksmes negadījuma vai zādzības gadījumā</li>
  <li>Civiltiesiskā atbildība Civiltiesiskā atbildība</li>
  <li>Apdrošināšana avāriju un tehnisku bojājumu gadījumie Apdrošināšana avāriju un tehnisku bojājumu gadījumie
  </li>
  <li>Apdrošināšana zādzību gadījumā Apdrošināšana zādzību gadījumā Apdrošināšana zādzību gadījumā</li>
</ul>

When making a list, how can I make the multi-line sentence be even with the start of the other sentences?

3 Answers3