it-swarm.com.ru

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

Я пытаюсь создать упорядоченный список в CSS + HTML, который выглядит следующим образом: CSS List Example

Я не могу на всю жизнь понять, как это сделать. Я пытался использовать list-image, но тогда цифры не появляются. Я попытался установить фон, но он не появится за номером, если list-style-position установлен в outside. Я попытался установить его с помощью фона и list-style-position: inside, а затем поместить текст внутри li в div, чтобы выровнять его, но ни одна комбинация чисел с плавающей запятой, полей и т.д. Не работала без обтекания цифры.

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

Итак, кто-нибудь может мне помочь с этим? Как бы вы создали вышеизложенное с использованием HTML + CSS, в идеале без использования JS, и определенно без использования только изображений. Этот текст должен быть доступен для выбора и копирования/вставки.

Поскольку комментатор спросил, вот разметка, которую я имею прямо сейчас:

<ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

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

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }
41
Andrew

Горизонтальное расположение вопроса может быть достигнуто с помощью 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, которые его не видят (а их сейчас не так много), то все должно быть хорошо.

22
Spudley

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

См .:http://jsfiddle.net/j2gK8/

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

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

См .:http://jsfiddle.net/XuHNF/

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

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

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

27
thirtydot

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

Стилизация упорядоченных номеров списка

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;}
18
Rob Rasmussen

Я думаю, что нашел решение для этого. Ваш 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; 
}

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

9
Alexios Tsiaparas

Я бы использовал flexbox и добавил 'divs' к 'li', содержащему число.

    <div class="container">
<ul class="info-list">
  <li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
<ul class="info-list">
  <li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
</div>

CSS:

.container {
  display: flex;
}
.info-list li {
  list-style: none;
  display: flex;
}
.info-list li > div {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 10px;
}

На codepen: https://codepen.io/mkempinsky/pen/OBNXGO

0
michele

Я обнаружил, что браузеры размещают изображение в стиле list-style в разных местах, и у одного из них есть только управление положением «снаружи» и «внутри».

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

http://jsfiddle.net/vEZHU/

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

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

0
gutierrezalex

content: counter (li) с инкрементом не работает у меня меньше, поэтому я нашел немного wokraround :)

li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
  content: '';
  position: absolute;
  left: -29px;
  top: 7px;
  display: block;
  background: @btn-bg-secondary;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: @bg-color-primary;
  padding-left: 7px;
  line-height: 1.5em;
}
&:nth-child(1):before{
  content: '1';
}
&:nth-child(2):before{
  content: '2';
}
&:nth-child(3):before{
  content: '3';
}
&:nth-child(4):before{
  content: '4';
}
&:nth-child(5):before{
  content: '5';
}
&:nth-child(6):before{
  content: '6';
}
&:nth-child(7):before{
  content: '7';
}
&:nth-child(8):before{
  content: '8';
}
}

http://jsfiddle.net/du6ezxj7/

0
Aleš Pázner

Правка: Я изменил код, поэтому попробуйте и соответствовать тому, что у вас есть

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

   <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 */
    }

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

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

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

0
Stanley Cup Phil