Question

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

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

据我所知，::after li无法解决问题。

请告知如何为padding-left: 50px的第一行设置li或在padding-left: 50px之前删除p。

Answer 1

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

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

如果padding-left li 50px为margin-left，您可以在p嵌套-50px上设置android { buildTypes { debug { signingConfig null } } }，就像我在上面的例子。

Answer 2

最好将每个<li>的标题（<p>之外的部分）放在<span>或其他标记中，并赋予它一个单独的样式填充左：50像素。像这样：

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

其中＆＃34; buy-way__header＆＃34;有padding-left：50px属性，＆＃34; purchase-way__item＆＃34;没有。

Answer 3

您可以为第一行指定span标记，然后将padding-left设为span

Answer 4

您可以将margin-left: -50px;添加到.purchase-way__text（=您的p-tag）

这会将段落向左移动50px。（由于p是li的子元素，因此您无法删除＆＃34;填充内容。）

小提琴：https://jsfiddle.net/eeedckk4/

在li里面的p标签之前删除padding-left

4 个答案: