子弹来自<li>元素？

Question

我目前的理解是，不同的HTML元素在功能上由默认的CSS样式，语义除外。

使用自定义CSS，您可以（不可避免地）使任何HTML元素的行为与其他HTML元素一样。

如果这是正确的，我唯一无法解释的是<li>元素上的项目符号。什么CSS导致他们？如何将其添加到其他元素？

未来读者请注意：我最近学习的HTML元素也因content categories而异。

Answer 1

子弹被包含在＆＃34;内。 <ul>元素的填充：

填充标记为绿色，边距为橙色：

减少填充表明子弹在＆＃34;内;填充：

例如，增加<ul>的边距，将其向右移动。

list-style属性控制项目符号本身。将其设置为none将隐藏它们。如果你想摆脱缩进，你需要将余量和填充设置为0。

ul
{
    list-style: none;
}

如果你想摆脱所有边距/填充和子弹点，请使用：

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

当然，您也可以将项目符号应用于其他HTML控件：

＆＃13;

＆＃13;

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}

＆＃13;

<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

浏览器通常有一个＆＃34;默认样式表＆＃34; - 一组适用于特定HTML元素的CSS样式。请查看Firefox default styles，Chrome's default styles和IE's default styles。

通常，<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元素的 left （在大多数语言中），并且不会干扰li显示框本身
• margin和padding设置正确放置内容。

<li>标记如下：

li {
  display: list-item;
}

• display: list-item与display: block;类似，允许单独的列表项显示在不同的行上。

Answer 3

请参阅此页https://css-tricks.com/almanac/properties/l/list-style/

子弹来自ul元素。 您可以使用属性list-style-type或list-style-image

修改它们

Answer 4

Location元素的圆形项目符号只是浏览器的默认值。就像它有一个默认字体，fontsize，链接下划线（蓝色）等。 要确保覆盖浏览器默认值，请使用一些css reset http://cssreset.com/或bootstrap css。

<DataGrid x:Name="CustomerLocationGrid" Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource CustomerViewSource}, UpdateSourceTrigger=PropertyChanged}" > <DataGrid.Columns> <DataGridTextColumn x:Name="customerDisplayList" Header="CustomerName" MinWidth="500" IsReadOnly="True" Binding="{Binding Name}"/> <DataGridTemplateColumn x:Name="networkTypeTemplateColumn" Header="Location" MinWidth ="200" CanUserResize="True" Width="*"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ComboBox x:Name="locationCombobox" ItemsSource="{Binding locationList, RelativeSource={RelativeSource AncestorType=UserControl}}" SelectedItem="{Binding Location}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> 的样式由customers或<li>定义。例如

＆＃13;

＆＃13;

<li>

＆＃13;

<ul>

＆＃13;

＆＃13;

＆＃13;

Answer 5

我认为最初的问题确实是，＆＃34;我如何向其他元素添加项目符号，因为CSS据说可以让任何东西（比如p元素）看起来像其他东西（比如LI）。

答案似乎是，李是一个特例，AFAIK。可能是错的。我尝试在<style="display: list-item; list-style-type:disc;">元素上添加<p>，但没有得到子弹。 （仅限Chrome测试）。

您实际上可以手动或以编程方式将项目符号（•）添加到每个p元素的开头，并将边距和填充设置为看起来像UL / LI块，我猜。

Answer 6

列表项上的项目符号是generated content的示例。生成内容的其他示例包括有序列表中的数字，CSS计数器以及:before和:after伪元素。

  

CSS会导致什么？

在元素上设置display: list-item将使其显示项目符号。你也可以change the appearance and position。

  

如何将其添加到其他元素？

见下面的例子：

.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计数器）。