styling bullet points в css

-1

Хорошо, это может быть глупый вопрос, но я схожу с ума по этому стилю пули. Я пытаюсь сделать его выглядеть следующим образом:styling bullet points в css

- Coffee      - Milk     - Milk 
- Coffee      - Milk     - Milk 
- Coffee      - Milk     - Milk

Используя эту разметку

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul> 

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul> 

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul>

источник

2016-03-24 Nevershow2016

Не могли бы вы уточнить? Вы хотите, чтобы ваши пули отображались как A, B, C или что ..? –

Согласитесь с Gavin, даже с вашим примером .. Я не уверен, что вы пытаетесь сделать –

Извините, что это был пример дерьма, я хочу, чтобы они отображались следующим образом, поэтому буквы и т. Д. Будут заменены текстом, но его на самом деле они выходят, если это имеет смысл? – Nevershow2016

Подобно этому, используя inline-block

li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    width: 30%; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

Может быть сделано с flex

ul { 
 
    display: flex; 
 
} 
 
li { 
 
    width: 33%; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

источник

2016-03-24 17:14:35 LGSon

Спасибо x за помощь – Nevershow2016

ul { 
 
    float:left; 
 
    }

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

Как это?

источник

2016-03-24 17:12:26

yep еще раз спасибо – Nevershow2016

li { 
    display: inline-block; 
    width: 33%; 
    margin: 0; 
}  
ul { 
    list-style-image: url(images/bullet.png); 
}

его простой способ сделать это.

источник

2016-03-24 17:14:51

Пожалуйста, попробуйте следующее:

li { 
    display: inline-block; 
    margin: 0; 
    width: 30%; 
} 
li:before { 
content: "-"; 
}

источник

2016-03-24 17:34:48 satya

styling bullet points в css

ответ

Смежные вопросы