0

http://jsfiddle.net/xarq5/

 <div id="hello">
      <ul>
          <li>Hello</li>
          <li>Hello</li>
      </ul>
 </div>

和上面 html 的 css

  #hello{
     margin:0px;
     padding:0px;
     border:1px solid black;
     float:left;
  }
  #hello ul{
      position:relative;
      display: inline-block;
      list-style:none;
      margin:0px;
      padding:0px;
  } 
  #hello li{
       float:left;
  }

对于上面的 html 和 css，我总是为 ul 元素获得额外的 5px 边距。

在逐行仔细检查我的代码中的每个 css 语句并编写上面的示例之后，我能够发现问题是由于

    display:inline-block;
    or
    display:inline-table;

克服这个问题的正确方法是什么？

其他一些论坛建议使用

“设置字体大小：0；用于父容器和字体大小：your_size；用于子容器。”

是否有任何其他解决方案可以防止这种情况，以便我的 0 字体大小不会级联到孩子。

谢谢斯里坎特

4

4 回答 4

5

添加vertical-align: middle;到#hello ul将摆脱底部不受欢迎的“填充”。

http://jsfiddle.net/xarq5/1/

默认的垂直对齐通常是baseline，它指的是没有下降线的字母的底部边缘（“a”或“B”没有下降线，但“y”或“g”有）。下面的小提琴使不受欢迎的“填充”的来源更加明显。它根本不是填充，而是为文本的下行保留空间。

http://jsfiddle.net/xarq5/11/

p {
    border: 1px solid;
}

p.aligned img {
    vertical-align: text-bottom;
}

<p>Something texty <img src="http://placehold.it/50x50" /></p>

<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>

如果问题是inline-block/inline-table 元素之间发生了不希望的间距，并且您不希望您的源代码看起来像一个巨大的连续句子，那么您可以使用注释。

<ul>
    <li>a</li><!--
    --><li>b</li>
</ul>
于 2013-03-05T17:32:04.637 回答
1

试试http://jsfiddle.net/xarq5/10/

#hello{
    float: left;
}

和

#hello ul {
    float: left
}

解释：每当你有一个包含其他浮动元素的 html 元素时，包含元素不会完全“包含”浮动元素，除非它本身是浮动的。

注意：与此答案不同，您可以保持 html 原样缩进（即不必担心间距或缺少间距）：

<body>   
    <div id="hello">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</body>
于 2013-03-05T17:38:01.100 回答
0

li如果您不想要任何空间，请确保您还将 设置为没有边距或填充。尝试将其设置为inline仅。

于 2013-03-05T17:33:48.433 回答
0

您还可以display: block;将ul元素设置display: inline-block;为li元素。

于 2013-03-13T06:15:33.923 回答