时间戳

首页 > 解决方案 > 导航栏挂在标题上，不知道为什么？

html - 导航栏挂在标题上，不知道为什么？

问题描述

我正在一个网站上进行练习，但我遇到了一个问题，我的导航栏挂在标题上方。我试过调整边距，但不起作用。我试过改变显示和位置，最终只是破坏了布局。我的主要目标是让导航干净地位于标题的右下角，但我不确定如何修复它。这是我输入的代码：

将代码放入代码片段中。 

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul,
li {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li a {
  padding: 14px 16px;
  background-color: green;
  display: block;
  color: white;
  text-decoration: none;
}

li a:hover {
  background-color: blue;
}

header {
  background-color: green;
  width: 100%;
  height: 200px;
  position: fixed;
  z-index: 100;
  top: 0;
  border-bottom: 3px black solid;
}

.nav {
  display: inline;
  float: right;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-top: 175px;
  position: relative;
}
<!DOCTYPE html>

<head>
  <title>Demo</title>
</head>

<header>


  <div class="nav">
    <ul>
      <li><a>Menu</a></li>
      <li><a>Contact</a></li>
      <li><a>News</a></li>
      <li><a>About</a></li>
    </ul>
  </div>

</header>

标签： htmlcss

解决方案

可能还有其他方法，但使用flex布局将解决您的问题。第一次添加display:flex您的标题。

然后.nav使用以下内容：

{
    display: flex;
    flex: 1;
    align-self: flex-end;
    justify-content: flex-end;
}

查看最终结果： 

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul,
li {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li a {
  padding: 14px 16px;
  background-color: green;
  display: block;
  color: white;
  text-decoration: none;
}

li a:hover {
  background-color: blue;
}

header {
  background-color: green;
  width: 100%;
  height: 200px;
  position: fixed;
  z-index: 100;
  top: 0;
  border-bottom: 3px black solid;
  display: flex;
}

.nav {
  display: flex;
  flex: 1;
  align-self: flex-end;
  justify-content: flex-end;
  
}
<!DOCTYPE html>

<head>
  <title>Demo</title>
</head>

<header>


  <div class="nav">
    <ul>
      <li><a>Menu</a></li>
      <li><a>Contact</a></li>
      <li><a>News</a></li>
      <li><a>About</a></li>
    </ul>
  </div>

</header>

有关 flex 工作原理的更多详细信息，请参阅：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

推荐阅读