html5导航高度样式

时间:2012-06-25 14:19:58

标签: css html5

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;}修复相同的问题。这里我的问题是如何使导航高度自动?

http://jsbin.com/alukej/edit#javascript,html,live

1 个答案:

答案 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问题。