Html:
<body>
<div>
<header>
HTML5
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Logout</a></li>
<li><a href="">Login</a></li>
</ul>
</nav>
<p id="navclear" />
的CSS:
/*page*/
body{
margin:0 auto;
width: 800px;
height:auto;
border: 1px solid black;
}
/*navigation*/
nav{
border: 1px solid black;
background-color: #E3E3E3;
height:auto;
}
nav ul{
list-style:none;
padding:0;
!margin-top:0;
}
nav li a{
float:left;
text-decoration:none;
display: block;
padding-right:5px;
width:75px;
background-color: #E3E3E3;
color:#66777F;
!line-height: .5em;
font-weight: bold;
font-family:Cantarell, Arial, Helvetica, sans-serif;
}
nav li a:hover{
color: #FE4C06;
}
#navclear{
clear:both;
}
我是html5的新手。在这里,我面临着高度属性的问题。我想让我的导航高度自动我尝试相同的上述语法,但ul部分溢出nav.Means高度:自动;不工作我无法通过nav ul {margin-top:0;}修复相同的问题。这里我的问题是如何使导航高度自动?
答案 0 :(得分:4)
修改强>
正如thirtydot评论的那样,<p class="clear" />
位于错误的位置。以下是修改后的代码:
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Logout</a></li>
<li><a href="">Login</a></li>
</ul>
<div class="clear"></div>
</nav>
我删除了所有不必要的代码(你还有很多“!”)
另一种选择是使用nav li{ display: inline; }
代替nav li{ float:right; }
以下代码:
<强> ORIGINAL 强>
只是为了扩展thirtydot和Nathanael的评论。
!higher:35px
是CSS中感叹号的错误语法用法。请参阅此处以获取有关如何正确使用它的说明:
话虽如此,您的CSS代码中似乎不需要!important
。
此外,您不需要最后一行height:auto;
,因为这已经是元素高度属性的默认行为。所以,就我们任何人现在所知,你的最终代码只需要:
HTML
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Logout</a></li>
<li><a href="">Login</a></li>
</ul>
</nav>
CSS
nav{
border: 1px solid black;
background-color: #E3E3E3;
}
如果您尝试实现不同的目标,请编辑您的问题并更清楚地解释。有时,图片可以帮助解决HTML问题。