Откуда берутся пули на элементах?

мое текущее понимание заключается в том, что различные элементы HTML разделены по своей функциональности их стилем CSS по умолчанию, семантикой в сторону.

используя пользовательский CSS, вы можете (нецелесообразно) заставить любой элемент HTML вести себя как любой другой.

Если это правильно, единственное, что я не могу объяснить это пули на <li> элементы. Что CSS вызывает их? Как вы можете добавить это к другим элементам?

Примечание для будущих читателей: я недавно узнал HTML элементы также отличаются категории контента.

6 76
html css

6 ответов:

пули содержатся "внутри" обивка <ul> элемент:

отступ отмечен зеленым цветом, а поле оранжевым:

1

уменьшение заполнения показывает, что пули находятся "внутри" этого заполнения:

4

увеличение поля <ul> например, сдвигает его вправо.

2

The list-style свойство контролирует сами пули. Установка его в none спрячет их. Вам нужно будет установить поля и отступы в 0 если вы хотите избавиться от отступа тоже.

ul
{
    list-style: none;
}

3

если вы хотите избавиться от всех полей / отступов и маркированных точек, используйте это:

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

5

конечно, вы также можете применить пули к другим элементам управления HTML:

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}
<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>
77

браузеры обычно имеют "таблицу стилей по умолчанию" - набор стилей CSS, применяемых к определенным элементам HTML. Взгляните на стили Firefox по умолчанию,стили Chrome по умолчанию и стили IE по умолчанию.

как правило, a <ul> тег имеет следующие переопределяемые стили CSS по умолчанию:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em; /* equivalent to margin-top in most languages */
  margin-after: 1em;  /* equivalent to margin-bottom in most languages */
  margin-start: 0px;  /* equivalent to margin-left in LTR */
  margin-end: 0px;    /* equivalent to margin-right in LTR */
  padding-start: 40px;/* equivalent to padding-left in LTR*/
}
  • list-style-type: disc рядом с элементом появляется значок диска.
  • list-style-position и list-style-image есть сброс. Их значения по умолчанию outside и none, соответственно. Это означает, что disc значок, определенный выше, появится в левый на li элемент (в большинстве языков) и не мешать li отобразить окно.
  • The margin и padding настройки правильно разместить контент.

An <li> тег следующим образом:

li {
  display: list-item;
}
  • display: list-item похож на display: block; и позволяет отдельным элементам списка отображаться в разных строках.
29

смотрите эту страницу https://css-tricks.com/almanac/properties/l/list-style/

пули приходят от элементов ул. Вы можете изменить их с помощью свойства list-style-type или list-style-image

5

круглые пули для <li> элементы-это просто браузер по умолчанию. Так же, как он имеет шрифт по умолчанию, размер шрифта, подчеркивание для ссылок (синий) и т. д. Чтобы убедиться, что вы перезаписали настройки браузера по умолчанию, используйте некоторые css reset http://cssreset.com/, или bootstrap css.

стиль <li> определяется <ul> или <ol> surounding его. например

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;} 
ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
ul.singleline { display:flex; list-style:none; } // css3 only
<ul class="circle">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="square">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol class="upper-roman">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol class="lower-alpha">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ul class="image">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="singleline">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
</ul>
5

Я думаю, что исходный вопрос действительно был: "как я могу добавить пули к другим элементам, поскольку CSS предположительно позволяет вам стилизовать что-либо (например, P-элементы), чтобы выглядеть как что-то другое (например, LI).

ответ, кажется, ли-это особый случай, АФАИК. Это может быть неправильно. Я попробовал добавить <style="display: list-item; list-style-type:disc;"> on <p> элементы, и не получил пули. (Проверено только с хромом).

вы можете добавить символы пули (&bull;) в ручном или автоматическом режиме в начале каждого P элемент, и установить маржу и отступ, чтобы выглядеть как блок UL/LI, я думаю.

3

пули на элементах списка являются примером контент. Другие примеры сгенерированного контента включают числа в упорядоченных списках, счетчики CSS и :before и :after псевдо-элементы.

что CSS вызывает их?

задание display: list-item на элементе будет отображаться пули. Вы можете изменить внешний вид и положение тоже.

как вы можете добавить это к другим элементы?

см. примеры ниже:

.mylist.type1 > span {
  display: list-item;
  /* inside: the marker is placed inside the element box before its content */
  list-style-position: inside;
}
.mylist.type2 > span {
  display: list-item;
  /* outside (default): the marker is placed outside the element box towards left */
  /* by the way you are not restricted to just bullets */
  list-style-type: lower-roman;
}
.mylist.type2 {
  /* add some room on left for bullets positioned outside */
  padding-left: 2em;
}
<div class="mylist type1">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<hr>
<div class="mylist type2">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

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

2