html5 导航高度样式答案

【问题标题】：html5 nav height stylehtml5 导航高度样式
【发布时间】：2012-06-25 14:19:58
【问题描述】：

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 height:auto;不工作。我无法通过 nav ul {margin-top:0;} 修复相同的问题。我的问题是如何使导航高度自动？

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

【问题讨论】：

我不知道你在问什么。你为什么使用!height:35px？您在哪个浏览器中进行测试？
如果您希望高度为自动，只需删除!height:35px;，它不应该有感叹号。如果这不能满足您的要求，height:auto; 不是问题。相反，你应该解释你想要达到的目标。 CSS 的高度有时会令人困惑，因此它可能正常工作。
我刚刚删除了 !height:35px;但仍然有同样的问题。我正在使用火狐@thirtydot
您的问题没有包含足够的细节。这是无法回答的。没有人可以回答它。我们只能猜测，因为您的问题不清楚。这是我的猜测：添加nav { overflow: hidden }。你应该改进你的问题。尝试制作jsbin.com 演示。
如果您将</nav><p id="navclear" /> 更改为<p id="navclear"></p></nav>，它将起作用。虽然这不是好的代码。

标签： css html

【解决方案1】：

编辑

正如三十多点评论的那样，您将<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>

我删除了你所有不必要的代码（你还有很多“！”）

jsBin Edit 1

另一种选择是使用nav li{ display: inline; } 而不是nav li{ float:right; } 下面的代码：

jsBin Edit 2

原创

只是为了扩展三十点和 Nathanael 的 cmets。

!higher:35px 是 CSS 中感叹号的错误语法用法。有关如何正确使用它的说明，请参见此处：

How do you read !important in CSS?

话虽如此，您的 CSS 代码中似乎不需要 !important。

此外，您也不需要最后一行height:auto;，因为这已经是元素高度属性的默认行为。所以，据我们现在任何人所知，您的最终代码只需：

jsFiddle.net Demo

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

【讨论】：