我如何將菜單鏈接放入我的 <nav> 塊？

Question

如果我沒有正確回答我的問題，我真的很抱歉，我真的很陌生。

我想將菜單項（我做了一個無序列表）放在導航塊中，但它們顯示在其下方。 它與我的身體內容（未顯示）重疊，這確實是有問題的。 有人可以幫我嗎？

粉紅色的盒子是我的導航欄。 我想將菜單按鈕放入其中。

我知道粉塊實際上是導航塊？

HTML：

<header>
    <h1>Header</h1><h2> | chapter</h2>
</header>

<nav>
    <ul id="menu">
        <li><a href="#">alpha</a></li>
        <li><a href="#">beta</a></li>
        <li><a href="#">gamma</a></li>
        <li><a href="#">delta</a></li>
    </ul>
</nav>

CSS：

header{
    background-color: green;
    border: 1px solid purple;
    width: 100%;
    height: auto;
}
nav{
    background-color: pink;
    border: 1px solid grey;
    width: 100%;
    height: auto;
}
h1, h2{
    display: inline;
}
/*Set li as buttons*/
#menu li{
    float: left;
    list-style-type: none;
    width: 5em;
    margin-left: -2.5em; /*Removes default indentation of lists*/
    margin-right: 5em;
    display: block;
}
/*display anchor tags as buttons*/
#menu a{
    display: block;
    background-color: white;
    border: 3px solid blue;
    text-align: center; 
    text-decoration: none;
    color: black;
}
/*display setting on button hover*/
#menu a:hover{
    color: white;
    background-color: black;
}

謝謝！

Answer 1

CSS中有很多錯誤：

list-style-type: none; 放在清單上，而不是清單上。 這是禁用默認列表行為並使列表保持一行的原因。

float: left; 將使元素浮動，但也將使父元素縮小，就好像它沒有任何內容一樣，這就是元素位於導航塊下方的原因。

display: block; 物品使他們站在自己的生產線上。 如果您希望多個元素並排放置，但仍具有邊距和填充（如塊），則需要使用inline-block 。 這比浮動元素更容易維護。

列表項上的邊距也太大了，我擺脫了那些。 坦白說，我真的不明白為什么人們會再使用列表。 您可以將鏈接直接放在導航欄中，並節省大量代碼。

 header { background-color: green; border: 1px solid purple; width: 100%; height: auto; } nav { background-color: pink; border: 1px solid grey; width: 100%; height: auto; } h1, h2 { display: inline; } /*Set li as buttons*/ #menu { list-style-type: none; } #menu li { width: 5em; margin: 0; display: inline-block; } /*display anchor tags as buttons*/ #menu a { display: inline-block; background-color: white; border: 3px solid blue; text-align: center; text-decoration: none; color: black; } /*display setting on button hover*/ #menu a:hover { color: white; background-color: black; } 

 <header> <h1>Header</h1> <h2> | chapter</h2> </header> <nav> <ul id="menu"> <li><a href="#">alpha</a> </li> <li><a href="#">beta</a> </li> <li><a href="#">gamma</a> </li> <li><a href="#">delta</a> </li> </ul> </nav> 

Answer 2

您需要清除容器中的浮動元素，因為它們不能正確拉伸容器。

將clearfix CSS添加到工作表中：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

然后將clearfix類添加到菜單：

<ul id="menu" class="clearfix">

小提琴

或者，從這里選擇其他clearfix解決方案之一（我在上面獲得了解決方案）。

Answer 3

擺脫菜單li下的剩余浮點數，然后將其替換為

#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}

如果您想將其向右移一點

#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}