编号列表中的文字换行

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（{{1 }}。

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;
}