CODEWITHSUNDEEP
css
PJCHENder
PJCHENder

Reputation: 6020

How to align list item and list content with space?

I want to create an order list with style like image shown below:

img

I have tried some methods with the code below:

body {
    padding: 20px;
}

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
}
ol li {
    position: relative;
}
ol li span {
    position: absolute;
    left: 30px;
}

It looks like the style I want. However, when the content wrap, it will collapse together:

img

Is there any way to solve it?

This is the link I use to demo:

Demo code

Upvotes: 3

Views: 80

Answers (3)

vsync
vsync

Reputation: 130680

CSS custom counter:

I would advise to do this using the dedicated CSS counter since it was made especially for these situations, where you need a custom-looking counter.

Also, as you can see, the HTML is much simpler and does not require any wrapping span inside each li item.

ol {
    counter-reset: list;
    list-style:none;
}

ol li {
    position: relative;
    padding-left: 40px;
}

ol li::before {
  position: absolute;
  left: 0;
  counter-increment: list;  
  content: counter(list, upper-roman)'.';
}
<ol>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur?</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</li>
    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</li>
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus.</li>
</ol>

Upvotes: 3

Niklesh Raut
Niklesh Raut

Reputation: 34924

Use div instead span, and change you css like below

body {
    padding: 20px;
}

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    display: initial;
}
ol li div {
    padding-left: 40px;
    margin-top: -19px;
}
<ol>
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</div></li>
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur?
          </div></li>
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</div></li>
    <li><div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</div></li>
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</div></li>
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</div></li>
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus.
          </div></li>
</ol>

Upvotes: 0

codesayan
codesayan

Reputation: 1715

Try list-style-position: inside;

body {
  padding: 20px;
}

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

ol li {
  position: relative;
  list-style-position: outside;
  padding-left: 5px;
}

ol li span {
  position: relative;
}
<ol>
  <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</span></li>
  <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur?
          </span></li>
  <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</span></li>
  <li><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</span></li>
  <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</span></li>
  <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</span></li>
  <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus.
          </span></li>
</ol>

Upvotes: 0

Related Questions