Стиль упорядоченного списка, чтобы число выровнялось по левому краю и над элементом? - PullRequest
Новая
       3

Стиль упорядоченного списка, чтобы число выровнялось по левому краю и над элементом?

0 голосов
/ 18 октября 2010

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

Я бы хотел оформить упорядоченный список, чтобы элементы выглядели так:

1

Первая позиция

2

Пункт два

3

Пункт три

Есть ли способ сделать это просто с помощью CSS?

Большое спасибо заранее!

Ответы [ 5 ]

3 голосов
/ 18 октября 2010

Вы можете попробовать выполнить следующие действия: 

<style>
    ol {
      list-style-position: inside;
      padding-left: 0;
    }
</style>

<ol>
    <li>&nbsp;<div>foobar</div></li>
    <li>&nbsp;<div>wah la</div></li>
</ol>

Это работает на FF и Chrome, но у меня нет IE на моей текущей машине, чтобы попробовать.

2 голосов
/ 18 октября 2010

Вы можете использовать свойство content с псевдоэлементом : before и экранированием новой строки \a: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>OL Test</title>
        <style type="text/css">
        li:before {
            content: "\a";
            white-space: pre;
        }
        </style>
    </head>
    <body>
        <ol>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ol>
    </body>
</html>

.браузеры, поддерживающие CSS 2.1.

2 голосов
/ 18 октября 2010

AFAIK, CSS не позволяет вам много контролировать относительно позиции элемента списка относительно "маркера" (или числа или чего-то еще) ... Так что itЛучше было бы сгенерировать числа непосредственно в HTML , на стороне сервера или на стороне клиента через Javascript ...

Тем не менее , работает следующее (по крайней мере, в Firefox), но довольно уродливо (с этим br в середине: - /) 

<html>
  <head>
   <style type="text/css">
    li > p{
        margin-left:-30px;
        margin-top:-10px;
    }
   </style>
  </head>
  <body>
    <ol>
        <li><br/><p>item 1</p></li>
        <li><br/><p>item 2</p></li>
    </ol>
  </body>
</html>

Идея состоит в том, чтобы заставить содержимое элемента списка быть включеннымдругая строка с br, а затем, к содержимому, применить некоторые отрицательные поля , чтобы переместить его туда, куда вы хотите ... Это, конечно, не очень хорошее решение ... в дополнениеЯ думаю, что каждый браузер может генерировать «список-указатель» по-своему, поэтому не было бы хорошего способа заставить его работать во всех браузерах ...

0 голосов
/ 08 сентября 2015

Я знаю, что этот вопрос действительно старый, но в итоге я нашел его при поиске того же ответа, и эти ответы не совсем соответствовали тому, что мне было нужно.Я также только что изучил эту действительно классную технику, используя «счетчик» в CSS.

Ваш CSS будет выглядеть примерно так: 

ol {
   list-style: none; /* Remove default numbers */
   counter-reset: item;
}
ol li {
   counter-increment: item;
}
ol li:before {
   content: counter(item); /* Add the numbers as content in the before pseudo */
   /* Continue styling as needed, changing, fonts, position, etc. */
   display: block;
}

JS Fiddle

0 голосов
/ 18 октября 2010

Это обязательно должен быть упорядоченный список?

Если вы динамически генерируете контент, то вы всегда можете вывести числа самостоятельно, а затем отформатировать разметку так, как вам нравится - вместо того, чтобы пытаться заставить браузер делать что-то «умное», упростите ситуацию, сделав что-то « умный`

...