HTML list-style-type dash

Question

HTML list-style-type dash

есть ли способ создать список-стиль в HTML с тире (т. е.-или -– или —), т. е.

<ul>

  <li>abc</li>

</ul>

вывод:

- abc

мне пришло в голову сделать это с чем-то вроде li:before { content: "-" };, хотя я не знаю минусов этого варианта (и был бы очень обязан за обратную связь).

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

719 16

html css xhtml html-lists

16 ответов:

Comments

Ничего не найдено.

Darko Z · Accepted Answer · 2015-12-11 02:42:17

вы могли бы использовать :before и content: учитывая, что это не поддерживается в IE 7 и ниже. Если вы в порядке с этим, то это ваше лучшее решение. Смотрите Могу Ли Я Использовать или QuirksMode таблицы совместимости CSS для получения полной информации.

немного более неприятное решение, которое должно работать в старых браузерах, - это использовать изображение для маркера и просто сделать изображение похожим на тире. Смотрите W3C list-style-image страница для примера.

aron.lakatos · Accepted Answer · 2015-12-21 17:31:37

существует простое исправление (текст-отступ), чтобы сохранить эффект списка с отступом с помощью :before псевдокласс.
ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Jase · Accepted Answer · 2016-12-27 12:45:30

используйте этот:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

velop · Accepted Answer · 2015-09-16 14:56:02

вот версия без какой-либо позиции относительной или абсолютной и без текстового отступа:
ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}
наслаждаться ;)

Keyan Zhang · Accepted Answer · 2016-12-05 18:11:08

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

demo скрипка

three · Accepted Answer · 2018-07-24 00:06:14

позвольте мне добавить свою версию тоже, в основном для меня, чтобы найти свое собственное предпочтительное решение снова:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

Albert Sosnowski · Accepted Answer · 2017-01-10 21:21:17

в моем случае добавление этого кода в CSS
ul {
    list-style-type: '- ';
}
было достаточно. Все очень просто.

user3849374 · Accepted Answer · 2017-03-14 20:41:32

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

biziclop · Accepted Answer · 2016-12-05 17:49:20

вот мой скрипка версия:

класс (modernizr).generatedcontent on <html> практически означает IE8+ и любой другой вменяемый браузер.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

Victor Stagurov · Accepted Answer · 2013-01-11 17:37:01

мое решение заключается в добавлении дополнительного тега span С mdash в нем:
<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>
и добавление в css:
ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

TNi · Accepted Answer · 2010-07-08 05:21:02

Я не знаю, есть ли лучший способ, но вы можете создать пользовательский графический маркер, изображающий тире, а затем сообщить браузеру, что вы хотите использовать его в своем списке с list-style-type собственность. Пример на этой странице показывает, как использовать графику в качестве маркера.

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

EDIT: я сделал небольшое тестирование с подходом OP. В IE8 я не мог заставить технику работать, поэтому она определенно еще не кросс-браузер. Кроме того, в Firefox и Chrome настройка типа списка-стиля в none в сочетании, по-видимому, игнорируется.

Carolyne Comtois · Accepted Answer · 2013-04-23 05:44:09

вместо использования lu li, используется dl (definition list) and dd. <dd> можно определить с помощью стандартного стиля css, такого как {color:blue;font-size:1em;} и использовать в качестве маркера любой символ после тега html. Он работает как ul li, но позволяет использовать любой символ, вам просто нужно отступить его, чтобы получить эффект списка с отступом, который вы обычно получаете с ul li.
CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
дает гораздо более чистый код! Таким образом, вы можете использовать любой тип символа в качестве маркера! Отступ имеет значение около -10px и он отлично работает!

imos · Accepted Answer · 2014-04-03 12:31:42

иначе:

li:before {
  content: '14a0a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

blackchestnut · Accepted Answer · 2016-12-27 12:46:02

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Bee Bat · Accepted Answer · 2017-12-08 13:05:33

для тех, кто имеет эту проблему сегодня, решение просто:

список-стиль: "- "

C oneil · Accepted Answer · 2018-03-23 17:58:02

то, что сработало для меня было

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>