Aligning list items

Question

Aligning list items

Navigation

#1 by (2 votes)

1

I have the following code:

ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}

li {
  margin-bottom: 20px;
}

    li:before {
      content: "92";
      padding-right: 10px;
    }

p {
  display: inline;
}

<ul>
    <li><p>Item 1 alaksjd fçalksdj fçlaksjd fçlaksjd fçlkasdj flçkajsdlçkfjasldçkjflçaksd jfçlkasjd flçkajsdlkçf asd</p></li>
    <li><p>Item 2 adflçaksd jglçakhsd flaksdh kjahsdf gjhdfjkh skjchvçz,xckhvj çzlxkcjv zçlxckjvlçz xckjvçzlxkcjv</p></li>
    <li><p>Item 3 asdlçfkj asdlkfj çalsdjf</p></li>
</ul>

The result is this:

Thedesiredresultisthis:

Note: The red line is only to mark the alignment and does not part of the desired result.

Is it possible to do this via CSS?

css

asked by anonymous 21.04.2017 / 00:39

1 answer

Error in the xml page of android Point to a Docker container with apache

score 2 · Accepted Answer

I believe that using display: inline in the p element is what complicates everything. Alternatively, you can position the li:before element absolutely and set a left margin for the p element. See:

ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}

li {
  margin-bottom: 20px;
  position: relative;
}

li:before {
  content: "92";
  padding-right: 10px;
  position: absolute;
}

p {
  margin-left: 20px;
}

<ul>
  <li>
    <p>Item 1 alaksjd fçalksdj fçlaksjd fçlaksjd fçlkasdj flçkajsdlçkfjasldçkjflçaksd jfçlkasjd flçkajsdlkçf asd</p>
  </li>
  <li>
    <p>Item 2 adflçaksd jglçakhsd flaksdh kjahsdf gjhdfjkh skjchvçz,xckhvj çzlxkcjv zçlxckjvlçz xckjvçzlxkcjv</p>
  </li>
  <li>
    <p>Item 3 asdlçfkj asdlkfj çalsdjf</p>
  </li>
</ul>