div 元素不考虑内联列表的填充答案

【问题标题】：div element not respecting an inline list's paddingdiv 元素不考虑内联列表的填充
【发布时间】：2011-07-05 13:17:04
【问题描述】：

我正在使用内联列表，并且我注意到下一行的 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>

【问题讨论】：

标签： html css layout inline padding

【解决方案1】：

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

【讨论】：

【解决方案2】：

内联元素不受上下内边距的影响（参见why）。

您可以改为inline-block:

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

【讨论】：

很好的答案，但这会将封闭的 ul （在实际页面中应用了一些样式）拉伸到整个页面的宽度，使其看起来很奇怪。有没有办法让它变小？
@futlib，我不知道为什么<ul> 会这样做。你能发布实际的 CSS 吗？
就是上面的内容，只有两个变化：你建议的 li 使用 inline-block 而不是 inline ，以及 ul 的边框（例如“边框：1px 纯红色”）。如果我对 ul 使用 inline-block 或 inline，它可以正常工作。