Question

为什么这个HTML + CSS：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
 p    { margin : 4em; }
 ul   { margin-left:  +2em; 
        margin-right: +2em;
      }
 li   { margin-left:  +2em; 
        margin-right: +2em;
      }
</style>
<title>test
</title>
<body>
<p>
para - first line
<ul>
list heading
<li> item 1
</li>
<li> item 2
</li>
list trailer
</ul>
para - last line
</p>
</body>
</html>

基本上看起来像是：


        para - first line





          list heading
            &bu; item 1
            &bu; item 2
          list trailer 

para - last line

（其中＆amp; bu;是列表项的项目符号的名称）。

请注意段落第一行之间的巨大空间和“列表标题”行。我怎么能摆脱这个呢？唯一适用的CSS属性似乎是'line-height'，但是似乎没有效果。

另外，为什么段落的最后一行缩进到左边比第一行？

这似乎是firefox 32的CSS渲染中的一个错误。我应该把它作为一个报告吗？

Answer 1

我已经使用其中的代码制作了jsfiddle;我在元素周围放置了边框，以便您可以看到每个元素的放置位置。

p元素周围有4em边距，因此强制它离开左边距并将其推离顶部和后面的元素4em。

第一个p元素也被错误地嵌套（ul中不能有p），因此浏览器假设它应该在{{{{}}之前关闭1}}开始。

列表的第一行“列表标题”未正确定位，因为文本不允许直接在ul元素内 - 它需要位于<ul>内（列表） item），或在<li>元素之外。

最后一行（'para-last line'）直接位于body元素内部，因此没有应用于另一个<ul>元素的4em边距。

如果您想摆脱巨大的差距，请更改p元素的css以删除4em边距 - 就这么简单！

我建议你在css盒子模型上做一些阅读，这样你就可以理解填充，边距以及元素填充空间的方式。我还建议通过验证器运行所有代码（HTML和CSS）以捕获简单错误，例如格式错误的p { margin : 1em; }元素，错误放置在<p>元素中的“列表标题”文本，和css中不必要的<ul>标志。

我重写了你的HTML和CSS，以产生更合理的边距和边框选择：见this jsfiddle for details。基础是：

确保您的HTML有效。
不要对边距使用大量值。
+是您正在使用的字体中em个字符的宽度。 4em是一个相当大的空间。

Answer 2

感谢上述回复，但他们没有找到问题的根源，恕我直言： HTML 5规范（http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-ul-element）表示：

4.4.6 The ul element
Categories:
    Flow content.
    If the element's children include at least one li element: Palpable content.
Contexts in which this element can be used:
    Where flow content is expected.

预期在＆lt; p＆gt;内的流量内容。段落标签，所以我解释意思是我可以自由地在段落中插入任何流内容元素。

另外，由于我没有结束段落，我不会有预期的＆＃39;下边距＆＃39; 已经应用，在段落的第一行和列表的第一个名称之间创建了巨大的空间。

现在，没有＆＃39; margin-left＆＃39;和＆＃39; margin-right＆＃39;为＆＃39; p＆＃39;指定的属性：



<style type="text/css">
  p    { margin-left : 2em; margin-right:2em; }
  ul   { margin-left:  +2em; 
         margin-right: +2em;
       }
  li   { margin-left:  +2em; 
         margin-right: +2em;
       }
</style>

<style type="text/css"> p { margin-left : 2em; margin-right:2em; } ul { margin-left: +2em; margin-right: +2em; } li { margin-left: +2em; margin-right: +2em; } </style>

我明白了：

     para - first line

        list heading
          item 1
          item 2
        list trailer 

para - last line

我特别想指定列表和列表项应该有它们左缩进由2em增加，右缩进由2em减去，其中这就是为什么我使用+ 2em / -2em长度值作为他们的margin-left和margin-right属性，很高兴firefox似乎很荣幸。

但我认为错误是firefox正在应用段落的底边在列表开始之前，当我没有用＆lt; / p＆gt;结束段落时。

段落最后一行的负缩进是真正的杀手 - 但任何想法如何摆脱它？

使用css定义有序和无序列表的边距和行间距

2 个答案: