Question

我正在使用内联列表，我注意到下一行的div不会尊重它的填充（即它是通过li元素的边框绘制的）。我能做些什么吗？

<html>
  <head>
    <style type="text/css">
      ul {
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
        list-style-type: none;
        padding: 10px;
        border: 1px solid gray;
      }

      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Hello</li>
      <li>World</li>
    </ul>
    <div>
      Hello, World!
    </div>
  </body>
</html>

Answer 1

内嵌元素不受顶部和底部填充的影响（请参阅why）。

相反，您可以将它们inline-block：

li {
   display: inline-block;
   zoom: 1; /* for IE */
   *display: inline; /* for IE */
}

Answer 2

对于li，请指定display: inline-block;而不是inline

div元素不遵循内联列表的填充

2 个答案: