自动时导航高度为0px

我是新手，正在学习如何用HTML和CSS编码，在制作导航栏时遇到了一个问题。问题如下：我设置了我的导航的背景色变成了红色，但我没有看到。这就像导航栏的高度是0px，我不知道为什么。有人能帮我吗？提前感谢！

body{
	margin:0;
}
nav ul{
	margin:0;
}
nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}
header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}
nav ul li{
	display:inline-block;
}
nav ul div{
	display:block;
}
nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}
header{
	background-color:#BACFEB;
	height: auto;
}
header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}
#right{
	float:right;
}
#left{
	float:left;
}
/*footer ul{
margin:auto;
}
footer ul li{
display: inline-block;
}*/
/*CSS works*/
nav ul li a:hover{
text-decoration:underline;
font-family: Arial;
color:red;
}

<nav>
  <ul>
    <div id="left">
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </div>
    <div id="right">
      <li><a href="#"> Sign in</a>
      </li>
    </div>
  </ul>
</nav>

因为.nav的所有内容都是浮动的，所以需要overflow: hidden来确保外部元素正确地跨越所有子元素。

nav {
  margin-top:0px;
  background-color:red;
  overflow: hidden;
}

更新的

这是由浮动的div引起的，它们也是无效的，因为不允许将div作为ul 的直接子级

注意：在下面的示例中，我更新了标记

你可以通过清除float的（这里解释得很好）来解决这个问题

nav:after {
  content: '';
  display: block;
  clear: both
}

body{
	margin:0;
}
nav ul{
	margin:0;
}
nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}
header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}
nav ul li{
	display:inline-block;
}
nav ul div{
	display:block;
}
nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}
header{
	background-color:#BACFEB;
	height: auto;
}
header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}
#right{
	float:right;
}
#left{
	float:left;
}
nav:after {
  content: '';
  display: block;
  clear: both
}
/*footer ul{
margin:auto;
}
footer ul li{
display: inline-block;
}*/
/*CSS works*/
nav ul li a:hover{
  text-decoration:underline;
  font-family: Arial;
  color:red;
}

<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

我建议你这样做，用flex而不是float。

如果你不能使用flex，display:table-cell会做几乎相同的事情（下面的示例2）

body {
  margin: 0;
}
nav ul {
  margin: 0;
}
nav {
  margin-top: 0px;
  background-color: red;
  height: auto;
}
nav {
  display: flex;
}
header img {
  height: 45px;
  width: 45px;
  display: block;
  margin: auto;
}
nav ul li {
  display: inline-block;
}
nav ul div {
  display: block;
}
nav ul li a {
  display: block;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
header {
  background-color: #BACFEB;
  height: auto;
}
header h1 {
  font-family: cursive;
  margin: 0;
  text-align: center;
}
/*CSS works*/
nav ul li a:hover {
  text-decoration: underline;
  font-family: Arial;
  color: red;
}

<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

样品2

body {
  margin: 0;
}
nav ul {
  margin: 0;
}
nav {
  margin-top: 0px;
  background-color: red;
  height: auto;
}
nav > div {
  display: table-cell;
}
header img {
  height: 45px;
  width: 45px;
  display: block;
  margin: auto;
}
nav ul li {
  display: inline-block;
}
nav ul div {
  display: block;
}
nav ul li a {
  display: block;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
header {
  background-color: #BACFEB;
  height: auto;
}
header h1 {
  font-family: cursive;
  margin: 0;
  text-align: center;
}
/*CSS works*/
nav ul li a:hover {
  text-decoration: underline;
  font-family: Arial;
  color: red;
}

<nav>
  <div id="left">
    <ul>
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </ul>
  </div>
  <div id="right">
    <ul>
      <li><a href="#"> Sign in</a>
      </li>
    </ul>
  </div>
</nav>

导航栏中的div #left和#right是浮动的。浮动元素在其容器中不占用任何垂直空间，这就是容器高度为0的原因。

不过有一种方法：将overflow: hidden;分配给容器，即分配给ul

body{
	margin:0;
}
nav ul{
	margin:0;
    overflow: hidden;
}
nav{
	margin-top:0px;
	background-color:red;
	height:auto;
}
header img{
	height:45px;
	width: 45px;
	display:block;
	margin:auto;
}
nav ul li{
	display:inline-block;
}
nav ul div{
	display:block;
}
nav ul li a{
	display:block;
	text-decoration: none;
	margin-left:20px;
	margin-right:40px;
	padding:10px;
	border:1px solid black;
	border-radius: 10px;
}
header{
	background-color:#BACFEB;
	height: auto;
}
header h1{
	font-family: cursive;
	margin:0;
	text-align: center;
}
#right{
	float:right;
}
#left{
	float:left;
}
/*footer ul{
margin:auto;
}
footer ul li{
display: inline-block;
}*/
/*CSS works*/
nav ul li a:hover{
text-decoration:underline;
font-family: Arial;
color:red;
}

<nav>
  <ul>
    <div id="left">
      <li><a href="index.htm">Home</a>
      </li>
      <li><a href="#"> About Us</a>
      </li>
      <li><a href="#"> Contact Us</a>
      </li>
    </div>
    <div id="right">
      <li><a href="#"> Sign in</a>
      </li>
    </div>
  </ul>
</nav>

因为float: left和float: right拆分了

如果你把它放在ul里，你必须在ul 的末尾放clear: both

试试这个

把这个div放在ul里面，但放在最新的上

<div style="clear:both;"></div>

相关内容

最新更新

热门标签：