Question

嗨我有问题，每当我尝试将导航设置为向右浮动时，我的#logo将我的背景颜色保留为标题。什么是解决此问题的最佳解决方案。

Add-Migration : Cannot add the link because the source file '' cannot be found.

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
}
#logo{
  padding-left: 30px;
  padding-top: 20px;
}
header a{
font: 1.5 Arial, Helvetica, sans-serif;
color: #006EB7;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
 }
 header li{
   text-align: right;
    display:inline-block;
 padding: 0 15px 0 15px;
 padding-top: 50px;
}
header #logo{
  float: left;
}
header nav{
float: right;
}

Answer 1

将overflow:hidden;添加到父header，它将解决问题

＆＃13;

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
  overflow:hidden;
}
#logo{
  padding-left: 30px;
  padding-top: 20px;
}
header a{
font: 1.5 Arial, Helvetica, sans-serif;
color: #006EB7;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
 }
 header li{
   text-align: right;
    display:inline-block;
 padding: 0 15px 0 15px;
 padding-top: 50px;
}
header #logo{
  float: left;
}
header nav{
float: right;
}

＆＃13;

<header>
  <div id="Logo">
  <img src="C:\Users\Mihajlo\Desktop\retardirani mihajlo\reeee1.png" width="196px" height="124px">
</div>
<nav>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CATALOG</a></li>
  <li><a href="#">CONTACT</a></li>
</nav>
</header>

＆＃13;

Answer 2

浮动#logo和#nav，不浮动标题意味着这些元素都浮动到标题的左侧和右侧，向标题添加浮点数，宽度如下所示应该修复它。：）

header{
  background-color: #C6C6C6;
  border-bottom: #87AAC1 8px solid;
  float:left;
  width:100%;
}

背景颜色消失

2 个答案: