Обтекание текстом в нумерованном списке

У меня есть стилизованный нумерованный список, но текст переносится под номером. Как я могу это исправить. У меня есть числа, стилизованные с помощью 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>

html css list listview styling

27.02.2019 16:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 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>

О, это работает во фрагменте кода в моем ответе - вы видите, что он работает? Вы скопировали весь код, который я здесь привел (включая HTML)? Что не работает для вас?

— 01.03.2019 09:17

27.02.2019 16:29