-2

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を初めて使用します。ここで、heightプロパティの問題に直面しています。navheightをautoにしたいと思います。上記の構文で同じことを試しましたが、ul部分がnav.Means height：auto;からオーバーフローしました。動作していません。nav ul {margin-top：0;}で同じことを修正することはできません。ここで私の質問は、ナビゲーションの高さを自動にする方法ですか？

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

4

1 に答える 1

4

編集

30 ドットがコメントしたように、あなたは<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; }

オリジナル

30dot と Nathanel のコメントを拡張するだけです。

!higher:35pxCSS の感嘆符の間違った構文使用法です。正しい使用方法については、こちらを参照してください。

!importantそうは言っても、CSS コードで必要とは思われません。

さらに、最後の行も必要ありません。これ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 の質問に役立つ場合があります。

于 2012-06-25T14:41:50.150 に答える