html - 在 li 内的 p 标签之前删除 padding-left

Question

我正在尝试设置 ol 列表的样式。我几乎执行了所有要求，但我无法删除 li 内的 p 标记之前的 padding-left: 50px。

我只需要为 li 的第一行设置 padding-left: 50px，但是它为 padding-left: 50px 设置了p 也。

请看例子:https://jsfiddle.net/8gm4zmc4/

据我所知，::after for li 无助于解决这个问题。

请指教如何为 li 的第一行设置 padding-left: 50px 或删除 之前的 padding-left: 50px >p.

Answer 1

那是因为你的 p 元素嵌套在你的 li 元素中，所以 li 中的所有内容也会在你设置时向右移动填充。您可以通过在 .purchase-way__text 上设置负 margin-left 来解决此问题，例如:

.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>

如果 li 的 padding-left 是 50px，你可以在你的上设置一个 margin-left嵌套 p of -50px 就像我在上面的例子中所做的那样。