html - 列表项不符合填充

Question

我是 html 和 CSS 的新手，但我遇到了一个问题，即我的填充似乎不会影响我的列表项。我指的是右上角的“帖子”框:

http://jsfiddle.net/GYcAg/2/embedded/result/

header 有这段代码:

#header { background-color: orange; height: 60px; line-height: 60px; padding:0px 50px; }

我的问题是，为什么它没有像看起来应该的那样向左缩进 50 像素？

Answer 1

这是因为#header ul是position absolute。这意味着它将忽略其父填充。

这应该可以解决

#header ul {
   float: right;
   list-style: none outside none;
   position: relative;
}