所有组件都显示好了。但是当我在NAVBAR-LEFT上按下F12和HOVER时,它的高度是0px。我想我需要通过在某个地方放置一个清晰的小div来解决这个问题,但我不知道到底在哪里!
<div class="core-container">
<div class="core-content">
<div class="navbar">
<div class="navbar-left">
<div class="navbar-logo">
LOGO
</div>
<div class="navbar-suggestions">
SUGGESTIONS
</div>
<div class="navbar-notifications">
NOTIFICATIONS
</div>
<div class="clear">
</div>
</div>
<div class="navbar-right">
<ul>
<li>Profiles & Schedules</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
css代码:
/ MASTER PAGE /
.core-container
{
margin-top: 100px;
border: 1px solid black;
}
.core-content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px 10px 20px;
}
.navbar
{
border: 1px solid red;
padding: 10px 5px 10px 5px;
}
.navbar-right div
{
float: right;
}
.navbar-left div
{
border-right: 1px solid red;
float: left;
padding-right: 10px;
margin-right: 10px;
}
.navbar-right ul li
{
list-style-type: none;
float: right;
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid red;
}
.clear
{
clear: both;
}
答案 0 :(得分:3)
是的,导航栏中的所有内容都是浮动的,因此它的高度保持为0.但这是一个问题吗?它在屏幕上看起来不错!
无论如何,快速回答是将float:none
附加到clear
类的样式。请确保使其具体到足以覆盖.navbar-left div
和navbar-right div
的样式,如下所示:
.navbar-left .clear, .navbar-right .clear
{
clear: both;
float:none;
}
答案 1 :(得分:2)
原因是您的clear
DIV上还有float
,因为您可以像这样定义类:
.navbar-right div
{
float: right;
}
这样写:
.navbar-right .clear
{
float: none;
}