文本包装在编号列表中

Question

我有一个带样式的编号列表，但文本正在包围数字。我该如何解决呢？我有使用CSS设计的数字。我尝试使用不同的填充和边距，没有任何作用。

 ol.numbered-list {
  counter-reset:item; 
    margin-left:20; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 30px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
    text-indent: -1em;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 45px;
    background: #fff;
    border: 2px solid #01A7E5;
    color: #01A7E5;
    text-align: center; 
    font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 800;
    float: left;
}

<ol class="numbered-list">
    <li><strong><span style="color:#01A7E5;">Invoice Number</span></strong></li>
    <li><strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.</li>
    <li><strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
        Number.
    </li>
    <li><strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.</li>
    <li><strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
        <g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
        electric bill rates.</li>
    <li><strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please do
        so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.</li>
</ol>

Answer 1

这是你在找什么？我已经从你的float:left标签中删除了:before - 因为这通常会从通常的布局中删除该项目。

为了使:before和你的内容在一行上对齐 - 我将你的文本包装在<p>标签中并在列表项（display:flex）上使用li。

ol.numbered-list {
  padding-left: 0;
}

ol>li {
  counter-increment: item;
  margin: 15px 0;
  display: flex;
}

ol>li:before {
  content: counter(item);
  margin-right: 20px;
  padding: 8px;
  border-radius: 50%;
  min-width: 45px;
  height: 45px;
  border: 2px solid #01A7E5;
  color: #01A7E5;
  text-align: center;
  font: 20px 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

p {
  margin: 0;
}

<ol class="numbered-list">
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Invoice Number</span></strong>
    </p>
  </li>
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Service Address:</span></strong> The address where you receive Entrust Energy electricity service.
    </p>
  </li>
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Account Number:</span></strong> Your Account Number identifies each Entrust Energy account you may have and is often used to pay your electric bill or set up recurring payments. You may have more than one Account
      Number.
    </p>
  </li>
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Bill Date: </span></strong>The date your electric bill is processed. You will receive one electric bill per month.
    </p>
  </li>
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Account Summary:</span></strong> An itemization of your balance, payments
      <g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" data-gr-id="18" id="18">and</g> charges for electric service as disclosed in your electricity facts label (EFL), including applicable taxes and fees. Please refer to the EFL you received when you signed up with Entrust Energy for more information about your applicable
      electric bill rates.
    </p>
  </li>
  <li>
    <p>
      <strong><span style="color:#01A7E5;">Total Amount Due:</span> </strong>This is the total amount that you currently owe Entrust Energy, including past due balances from your previous electric bills. When paying your electric bill by mail, please
      do so at least five days prior to the due date so that we receive your bill on time. Click here to learn about your other payment options.
    </p>
  </li>
</ol>