Перенос текста в нумерованный список - PullRequest
Новая
       24

Перенос текста в нумерованный список

0 голосов
/ 27 февраля 2019

У меня есть нумерованный список в стиле, но текст оборачивается под номером.Как я могу это исправить.У меня есть номера в стиле CSS.Я пробовал использовать разные отступы и поля, ничего не работает.

screen shot

 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>

1 Ответ

0 голосов
/ 27 февраля 2019

Это то, что вы ищете?Я удалил 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>
...