Question

我正在尝试在标题的底部放置一个下拉菜单。无论出于何种原因，菜单都不会被视为标题的一部分。

Html代码：

<div id="header">
<div id="navbarList">
{% if userroles %}
{% if 'root' in userroles %}
{% include "rootMenu.html" %}
{% elif 'admin' in userroles %}
{% include "adminMenu.html" %}
{% elif 'worker' in userroles %}
{% include "workerMenu.html" %}
{% else %}
{% include "NoMenu.html" %}
{% endif %}
{% else %}
{% if login is defined and login is not none %}
{% include "Home.html" %}
{% endif %}
{% endif %}
</div>
</div>

css代码：

#header{
min-height:95px;
width:100%;
margin:0;
background-color:black;
}
#navbarList{
list-style:none;
width:65%;
position:absolute;
bottom:0;
right:0;
}

当我使用firebug查看网站时，我发现导航栏不会继承标头的css。我错过了什么？

Answer 1

Not all css properties are inherited。例如，min-height和大多数高度/边距属性都不是因为假设子div或其他对象的维度属性与其父对象不同，因为它们在层次上“在”其他元素内部。否则，指定父元素的宽度会自动使其所有子元素与父元素一样大！

有关未继承的特定属性列表，请查看此处：http://www.w3.org/TR/CSS21/propidx.html

但是，如果您询问定位问题，则问题出在导航栏中指定的position: absolute。这将从正常的文档流中删除div，并将其绝对放在html的右下角。如果您希望导航栏绝对相对于标题定位，请将position: relative放在标题上，这样可以启用相对绝对子项定位。有关详情，请参阅此处：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

这是您当前设置的JSFiddle：

http://jsfiddle.net/maQa6/

此处是在标题中指定position: relative后:(为清晰起见，字体更改为白色）

http://jsfiddle.net/V5Dpn/

Css不是级联？

1 个答案: