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">

fiddle

或者，从here中选择其中一个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;
}

如何将菜单链接放入<nav>块？

3 个答案: