Пользовательский символ маркера для <li>элементов в <ul>, который является обычным символом, а не изображением - PullRequest
Новая
       62

Пользовательский символ маркера для <li>элементов в <ul>, который является обычным символом, а не изображением

109 голосов
/ 08 октября 2011

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

list-style-image

А затем присвоить ему URL.

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

Можно ли это сделать, или я вынужден сначала сделать его графическим?

Ответы [ 14 ]

1 голос
/ 27 марта 2016

Интересно, что я не думаю, что какие-либо из опубликованных решений достаточно хороши, потому что они основаны на том факте, что используемый символ имеет ширину 1 м, что не обязательно должно быть так (за исключением, возможно, ответа Джона Магнолии, который, однако, используетплавает, что может усложнить ситуацию по-другому).Вот моя попытка: 

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Это имеет следующие преимущества (по сравнению с другими решениями):

  1. Это не зависит от ширины символа как вы видите в примере.Я использовал два символа, чтобы показать, что он работает даже с широкими пулями.Если вы попробуете это в других решениях, вы получите смещенный текст (фактически он даже виден с символом * в увеличенных масштабах).
  2. Это дает вам контроль над пространством, используемым пулями ,Вы можете заменить 30 пикселей на что угодно (даже 1em и т. Д.).Только не забыли поменять его на все три места.
  3. Если дает вам общее управление позиционированием пули .Просто замените text-align: center; на что угодно.Например, вы можете попробовать color: red; text-align: right; padding-right: 5px; box-sizing: border-box; или, если вам не нравится играть с рамкой, просто вычтите отступ (5px) из ширины (т.е. width: 25px в этом примере).Есть много вариантов.
  4. Он не использует поплавки, поэтому он может содержаться где угодно.

Наслаждайтесь.

1 голос
/ 04 августа 2015

Я предпочитаю использовать отрицательную маржу, дает вам больше контроля 

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
0 голосов
/ 30 января 2019

Em Dash стиль: 

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
0 голосов
/ 22 февраля 2016

попробуйте 

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>
Страница:
...