<ol><li> нечетные позиции, когда изображение выровнено по левому краю - PullRequest
Новая
       21

<ol><li> нечетные позиции, когда изображение выровнено по левому краю

2 голосов
/ 01 апреля 2012

http://www.brixwork.com/realtors/blog/marketing-promotion/combining-pdfs-online-for-a-comprehensive-presentation/

У меня есть два вхождения <ol><li> s в этом сообщении в блоге. Первый экземпляр отлично отформатирован с использованием этого CSS: 

.post_content ul, .post_content ol {
    padding-left: 20px;
    margin: 0px 0px 20px 0px;
}

И затем, ниже, рядом с изображением значка PDF (которое всплывает влево), пули тянут в левую сторону и не совсем правильно выстраиваются в линию ... что мне не хватает?

Ответы [ 2 ]

2 голосов
/ 01 апреля 2012

попробуйте добавить

list-style-position: inside; на ваш css для <ol>.

По сути, ваши 20px отступы идут вверх по левой границе содержащего элемента и съедаются плавающей картинкой. Перемещение номеров списка «внутри» содержащего элемента позволяет им вести себя как текст <p> вокруг них.

Это также сделает отступ в <ol>, который у вас есть, на который не влияет float, поэтому вы можете создать специальный класс для этого <ol> (или избавиться от левого отступа, если вы только добавили его сделать первую <ol> линию).

0 голосов
/ 01 апреля 2012

Кэмерон прав (+1). Это лучшее решение.

Однако некоторые люди решили эту проблему просто:

  1. Сокрытие чисел / маркеров (т.е. list-style:none;)
  2. Жесткое кодирование пуль / цифр самостоятельно

Пример: 

<ol style="list-style:none;">
  <li>1. Create PDF forms that can collect data</li>
  <li>2. Include multimedia (pictures, videos) from multiple sources into the PDF</li>
  <li>3. Sign PDFs</li>
  <li>4. And more!</li>
</ol>

Лично я не буду делать это жестко, но это может быть полезным инструментом в вашем поясе.

Вот отличная статья о том, как стилизовать числа упорядоченных списков с помощью CSS без жесткого кодирования чисел, как я обрисовал выше:

...