没有浮动的填充顶部：左？答案

【问题标题】：padding-top without float:left?没有浮动的填充顶部：左？
【发布时间】：2010-09-13 23:02:42
【问题描述】：

ul.menu_middle_inner li {
         display:inline;
         list-style:none outside none;
         padding:0 10px;
}

不确定事情是否足够清楚.. 但是对于这段代码，我如何在这个类中使用 padding-top？除非我使用 float:left，padding-top:5px(say) 根本不起作用......我不想使用 float:left......希望我的问题很清楚......

【问题讨论】：

为什么 padding-top 不能在没有浮动的情况下工作？请发布您的 html（以及更多上下文 css），我实际上是其他问题。此时虽然 padding-top 为 0。
你测试的是什么浏览器？它似乎在 Chrome 中工作：jsfiddle.net/zcqmU/1

标签： html css

【解决方案1】：

display:inline;

填充不适用于内联元素。

你需要把它变成一个块级元素。删除此行，列表将恢复为块级对象。

如果你需要它收缩到内容的宽度，你需要浮动。或者，尝试inline-block（可能不适用于所有浏览器）。

【讨论】：

【解决方案2】：

尝试一次性指定填充，而不是添加另一个填充参数。填充方向是顺时针方向，所以它从顶部开始，如下所示：

padding: top right bottom left;

所以如果你想在顶部添加填充：

padding: 5px 10px 0 10px;

在底部为您提供 0 填充。如果要同时添加到顶部和底部，可以使用速记：

padding: 5px 10px;

哦，你必须添加 display: block(or if inline-block);

【讨论】：