html - 列表项不符合填充

Question

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

标头有以下代码：

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

我的问题是，为什么这不像看起来应该的那样向左缩进 50px？

score 3 · Accepted Answer

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

这应该解决它

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

score 3 · Accepted Answer

尝试这个

#header ul {
    list-style: none outside none;
    position: absolute;
    right: 50px;
    top: 0;
}

//right 0 将跳过所有内容

score 2 · Accepted Answer

您会注意到您的列表项有一个red background-color，而您认为与它相关的代码（您在此处发布的内容）有一个背景色orange。

您的邮箱是元素内部的一个#header元素，而不是#header元素本身。

你想定位的ul后代#header：

#header ul { 
  list-style: none; 
  float:right; 
  top: 0; 
  right:50px; /* <- Change this from 0 to 50px */
}

3 回答 3