Question

我正在阅读文章在http://www.w3schools.com/css/css_list.asp上定位列表项标记。我不明白他们的意思，

list-style-position属性指定列表项标记是否应出现在内容流的内部或外部：

我已经阅读了一些有关流量内容和短语内容的帖子on stackoverflow。如果我理解正确，流内容可以嵌入内嵌元素和标签，例如<p>可以嵌入<span>和简单的文本，图像等。而短语内容是我们插入的内容线，即内联。基本上流内容似乎是一个上层的东西，可以包含分组或大的东西，如段落包含许多行等。短语内容似乎是较低级别的东西，通常是更大的一部分，如文本是段落的一部分。

考虑到这个概念，我无法弄清楚当流体内容仍处于内联状态时，某些东西是否会流出流内容。我在两种类型的列表here之间注意到的唯一区别是，当列表项标记位于流内容之外时，它们似乎以列表元素的文本向后缩进的方式进行调整。缩进是这样的，如果list-style-markers开始于20px缩进，当它们在流内容中时，那么现在文本将从20px缩进开始。但是行标记仍然是内联！它们仍然是更大的东西的一部分。

我完全无法理解某些内容不在流内容并且内联的内容。请解释一下流量内容是什么意思，但仍然是流程的一部分。

Answer 1

该示例使其有点难以看清，因为它们的行长度太短，但内容是指li的文本以及他们是否希望您的标记与其内联。请注意下面运行下面的代码片段（来自W3C的示例中的副本，但行更长。注意子弹的放置与包裹的下一行文本相比。

ul.a {
  list-style-position:inside;
}
ul.b {
  list-style-position:outside;
}

<p>The following list has list-style-position: inside:</p>
<ul class="a">
  <li>I like coffee I like tea.  I love the java jive and it loves me.  Coffee and tea and the java and me.  A cup a cup a cup a cup a cup.</li>
  <li>I love java, sweet and hotWhoops Mr. Moto, I'm a coffee pot/ Shoot the pot and I'll pour me a shot. A cup, a cup, a cup, a cup, a cup</li>
  <li>Oh slip me a slug from the wonderful mug And I'll cut a rug just snug in a jug A sliced up onion and a raw one. Draw one - Waiter, waiter, percolator</li>
</ul>

<p>The following list has list-style-position: outside:</p>
<ul class="b">
  <li>I like coffee I like tea.  I love the java jive and it loves me.  Coffee and tea and the java and me.  A cup a cup a cup a cup a cup.</li>
  <li>I love java, sweet and hotWhoops Mr. Moto, I'm a coffee pot/ Shoot the pot and I'll pour me a shot. A cup, a cup, a cup, a cup, a cup</li>
  <li>Oh slip me a slug from the wonderful mug And I'll cut a rug just snug in a jug A sliced up onion and a raw one. Draw one - Waiter, waiter, percolator</li>
</ul>

<p>"list-style-position: outside" is the default setting.</p>

在html中超出内容流程意味着什么？

1 个答案: