HTML + CSS: нумерованный список с номерами внутри кругов

Ответ 1

Горизонтальный макет вопроса может быть достигнут с помощью CSS float и/или display:inline-block;. Они хорошо документированы для этого, поскольку элементы списка часто используются для создания раскрывающихся меню с использованием этой техники, поэтому я не буду здесь обсуждать это здесь.

Аспект с обведенным номером немного сложнее.

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

Одна идея, которая появилась у меня в голове, - использовать шрифт, который имеет свои номера в кругах, например этот, а затем просто нарисуйте <ol> элемент для использования этого шрифта, а элемент <li> - обычный шрифт. Нижняя сторона этого заключается в том, что вам нужно будет сохранить список ниже 10 элементов, и браузеру пользователя нужно будет загрузить весь шрифт только для этого. Кроме того, вам нужно будет выбрать тот, который соответствует другим шрифтам на вашем сайте. Вероятно, это не идеальное решение, но это сработает.

Более практичным решением было бы полностью отказаться от стиля списка (по-прежнему использовать ту же разметку HTML, но установить list-style:none;). Затем числа будут добавлены с использованием CSS, мало используемых :before и count() функций.

В вашем случае это будет выглядеть следующим образом:

ol ul:before {
    content: counter(mylist);
}

Это даст вам такую ​​же нумерованную последовательность. Затем вам нужно будет добавить дополнительные стили в селектор выше, чтобы дать ему круг, некоторые цвета и немного разницы. Вам также необходимо каким-то образом стилизовать элемент <li>, чтобы весь его текст был отступом от числа, а не обертыванием под номером. Я ожидаю, что это можно сделать с помощью display:inline-block; или аналогичного.

Это может потребоваться немного экспериментов, и я не дал полного ответа, но техника, безусловно, будет работать.

См. quirksmode.org для записи и примеров вместе с диаграммой совместимости с браузером.

И диаграмма совместимости браузеров дает представление о том, что одна из основных сторон этой методики: она не будет работать в IE7 или ранее. Он работает в IE8, хотя и во всех других браузерах, поэтому, если вы можете жить с пользователями IE7, которые не видят его (и в наши дни их не так много), тогда все должно быть хорошо.

Ответ 2

Я использую идеи, которые @Spudley имеет в своем ответе, и я использую идеи из предыдущего ответа, который я написал:

• Как использовать CSS для округления круга с кругом?

Смотрите: http://jsfiddle.net/j2gK8/

IE8 не поддерживает border-radius, и обходные пути, такие как CSS3 PIE, не работают с :before. И старые браузеры, такие как IE7, не поддерживают counter.

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

Смотрите: http://jsfiddle.net/XuHNF/

Итак, есть фантастический подход, который не будет работать в IE7 + IE8, который, вероятно, это исключает. И тогда есть уродливый, но совместимый метод.

Конечно, всегда есть еще одна проблема. Если у вас разное количество текста, то это произойдет.

Затем вы смотрите на эту проблему:

• Плавающие разделители CSS на переменных высотах
• https://stackoverflow.com/search?q=user%3A405015+masonry

Ответ 3

Если кто-то все еще читает это, я столкнулся с той же проблемой и нашел учебник, который был чрезвычайно полезен.

Стиль упорядоченных номеров номеров

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}

Ответ 4

Думаю, я нашел решение для этого. Ваш HTML-код будет

<ol>
   <li>First item</li>
   <li>Second item</li>
</ol>

Если вы применяете следующие стили, он становится совсем как круг:

ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}

Затем я играл бы с прокладками и радиусом, чтобы он выглядел как круг

Ответ 5

РЕДАКТИРОВАТЬ: Я изменил код, поэтому попробуйте и сопоставьте то, что у вас есть

Я попытался сделать это с помощью карусели, которую я создавал с изображением и ссылкой внутри каждого элемента списка следующим образом:

   <ol id = "list">
     <li class = "listItems">
       <!-- Image -->
       <img src = "YourImage" class = "listNumber"></div>
       <!-- Text -->
       <div class = "listInfo">Info goes here</div>
     </li> 
   </ol>

и т.д. для каждого элемента. Чтобы заставить их отображаться горизонтально, мой css выглядел так:

#list
{
    list-style: none;
    width: 5000px;  /* Total width of list IMPORTANT*/
}
    /* Image gallery list item*/
    #list li
    {
        float :left;    /* Arranges the items in a horizontal list IMPORTANT */
    }

Это сделало все изображения горизонтальными. Чтобы редактировать каждый элемент внутри списка, вам нужно поместить его в div, а затем отредактировать css. После того, как все они будут плавать одинаково, css внутри divs не должно вызывать проблем. Вы можете просто стилизовать их по классу следующим образом:

.listNumber
{
  postion: absolute;
  left: (#)px;
  top: (#)px;
}

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

Ответ 6

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

Я рекомендую следующее:

http://jsfiddle.net/vEZHU/

ПРИМЕЧАНИЕ. Вы также можете использовать float, чтобы выложить их или что я сделал. Кроме того, это означает, что вы знаете спрайтов.

Надеюсь, что это имеет смысл.