remove padding-left before p tag inside li

Question

I am trying to styling ol list. I almost performed all requirements, but I cannot to remove padding-left: 50px before p tag inside li .

I just need to set padding-left: 50px for the first line of li , but it sets padding-left: 50px for p also.

Please see the example: https://jsfiddle.net/8gm4zmc4/

As I understand ::after for li will not help to fix that.

Please advise how to set padding-left: 50px for the first line of li or remove padding-left: 50px before p .

Answer 1

That's because your p element is nested inside your li element, so everything inside the li will also move to the right when you set a padding. You can solve this by setting a negative margin-left on your .purchase-way__text like:

 .purchase-way__list { display: inline-block; box-sizing: border-box; text-align: left; margin-top: 35px; width: 100%; counter-reset: foo; } .purchase-way__item { position: relative; counter-increment: li; list-style: none; box-sizing: border-box; font-family: ProximaNovaBold, sans-serif; font-size: 24px; line-height: 0.833; color: #01b04c; margin-bottom: 80px; padding-left: 50px; } .purchase-way__item::before { content: counter(li); position: absolute; left: 0; top: -6px; background: #01b04c; height: 32px; width: 32px; font-family: ProximaNovaRegular, sans-serif; font-size: 18px; color: #fff; line-height: 32px; text-align: center; border-radius: 16px; } .purchase-way__text { box-sizing: border-box; text-align: left; font-family: ProximaNovaRegular, sans-serif; font-size: 14px; line-height: 1.714; color: #000; margin-top: 30px; margin-left: -50px; } 

 <ol class="purchase-way__list"> <li class="purchase-way__item"> Lorem ipsum dolor sit amet <p class="purchase-way__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus. Praesent feugiat sit amet lectus nec mattis. </p> </li> <li class="purchase-way__item"> Lorem ipsum dolor sit amet <p class="purchase-way__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus. Praesent feugiat sit amet lectus nec mattis. </p> </li> <li class="purchase-way__item"> Lorem ipsum dolor sit amet <p class="purchase-way__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus. Praesent feugiat sit amet lectus nec mattis. </p> </li> </ol> 

If your padding-left from li is 50px , you can set a margin-left on your nested p of -50px like I did in the example above.

Answer 2

It's probably best to put the title of each <li> (the part outside the <p> ) in a <span> or other tag, and give it a separate style with padding-left:50px. Like so:

<li class="purchase-way__item">
  <span class="purchase-way__header">HEADER</span>
  <p class="purchase-way__text">PARAGRAPH HERE</p>
</li>

where "purchase-way__header" has the padding-left:50px attribute, and "purchase-way__item" does not.

Answer 3

您可以给第一行span标签，然后给padding-左跨

Answer 4

You can add margin-left: -50px; to .purchase-way__text (= your p-tag)

This will move the paragraph to the left by 50px. (Since p is a child element of li , you can't "remove" the padding for it.)

Fiddle: https://jsfiddle.net/eeedckk4/