我想做什么

Question

我想做什么

我想显示导航栏内嵌我正在创建的网站的标题。

HTML和CSS

header {
    	max-width: 1000px;
    	margin: 0 auto;
    	padding: 10px;
    	background: blue;
    }
    
    #logo, nav {
    	float: left;
    }
    
    #logo {
    	width: 40%;
    	background: red;
    	color: white;
    	text-align: center;
    	height: 100px;
    	line-height: 100px;
    	font-size: 24px;
    }
    
    nav {
    	width: 60%;
    	background: #333;
    	height: 100px;
    	position: relative;
    }
    
    #top-nav {
    	position: absolute;
    	bottom: 0;
    }
    
    #top-nav li {
    	float: left;
    	background: #333;
    }
    
    #top-nav li a {
    	display: block;
    	color: white;
    	text-decoration: none;
    	padding: 14px 16px;
    }
    
    #top-nav li:hover > a {
    	background: #111;
    }
    
    .dropdown {
    	position: relative;
    }
    
    .dropdown-content {
    	display: none;
    	position: absolute;
    	min-width: 160px;
    	z-index: 1;
    }
    
    .dropdown:hover .dropdown-content {
    	display: block;
    }
    
    .dropdown-content li {
    	float: none;
    }

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <link rel="shortcut icon" href="">
      <link rel="stylesheet" type="text/css" href="css/reset.css">
      <link rel="stylesheet" type="text/css" href="css/styles.css">
   </head>
   <body>
      <header>
         <div id="logo">
            <span>My Site</span>
         </div>
         <div style="clear:both;"></div>
         <nav>
            <ul id="top-nav">
               <li><a href="#">Item</a></li>
               <li class="dropdown">
                  <a href="#">Item</a>
                  <ul class="dropdown-content">
                     <li><a href="#">Sub Item</a></li>
                     <li><a href="#">Sub Item</a></li>
                  </ul>
               </li>
               <li><a href="#">Item</a></li>
               <li><a href="#">Item</a>
               <li>
            </ul>
         </nav>
         <div style="clear:both;"></div>
      </header>
   </body>
</html>

什么破坏了代码

将padding: 10px;添加到header似乎已经破坏了代码，因为之前工作正常，因为导航栏正好显示内联标题。我似乎无法理解这个问题，我真的不明白是什么导致它。

另外，我知道这不是Code Review，但是对于代码中可以改进/格式化不同的任何评论都将不胜感激。

Answer 1

您应该移除<div style="clear:both;"></div> div以显示与徽标内联的导航栏。

还要将此添加到您的css中以消除列表样式：

ul {
list-style-type: none;
}

Answer 2

将10px padding header添加到1000px使其宽于1020px，它将box-sizing: border-box宽。为防止这种情况，您应使用div's。

更多信息：https://www.w3schools.com/css/css_boxmodel.asp

修改：

这不是问题，我误解了你的问题。 div不是内联的，因为clear: both带有内联样式#logo，因为它会清除父div中的浮动。

如果您将其删除，则nav和header { max-width: 1000px; margin: 0 auto; padding: 10px; background: blue; } #logo, nav { float: left; } #logo { width: 40%; background: red; color: white; text-align: center; height: 100px; line-height: 100px; font-size: 24px; } nav { width: 60%; background: #333; height: 100px; position: relative; } #top-nav { position: absolute; bottom: 0; } #top-nav li { float: left; background: #333; }会相互浮动：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="shortcut icon" href=""> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <header> <div id="logo"> <span>My Site</span> </div> <nav> <ul id="top-nav"> <li><a href="#">Item</a></li> <li class="dropdown"><a href="#">Item</a> <ul class="dropdown-content"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> <li><a href="#">Item</a></li> <li><a href="#">Item</a><li> </ul> </nav> <div style="clear:both;"></div> </header> </body> </html>

{{1}}

Answer 3

您立即在徽标下隐藏了<div style="clear:both"></div>个徽标，删除它并解决您的问题，请查看以下代码段：

＆＃13;

header {
    	max-width: 1000px;
    	margin: 0 auto;
    	padding: 10px;
    	background: blue;
    }
    
    #logo, nav {
    	float: left;
    }
    
    #logo {
    	width: 40%;
    	background: red;
    	color: white;
    	text-align: center;
    	height: 100px;
    	line-height: 100px;
    	font-size: 24px;
    }
    
    nav {
    	width: 60%;
    	background: #333;
    	height: 100px;
    	position: relative;
    }
    
    #top-nav {
    	position: absolute;
    	bottom: 0;
    }
    
    #top-nav li {
    	float: left;
    	background: #333;
    }
    
    #top-nav li a {
    	display: block;
    	color: white;
    	text-decoration: none;
    	padding: 14px 16px;
    }
    
    #top-nav li:hover > a {
    	background: #111;
    }
    
    .dropdown {
    	position: relative;
    }
    
    .dropdown-content {
    	display: none;
    	position: absolute;
    	min-width: 160px;
    	z-index: 1;
    }
    
    .dropdown:hover .dropdown-content {
    	display: block;
    }
    
    .dropdown-content li {
    	float: none;
    }
    ul {
      list-style-type: none;
    }

＆＃13;

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <link rel="shortcut icon" href="">
      <link rel="stylesheet" type="text/css" href="css/reset.css">
      <link rel="stylesheet" type="text/css" href="css/styles.css">
   </head>
   <body>
      <header>
         <div id="logo">
            <span>My Site</span>
         </div>
         <!-- This clear div is making your nav below the logo-->
         <!--<div style="clear:both;"></div>-->
         <nav>
            <ul id="top-nav">
               <li><a href="#">Item</a></li>
               <li class="dropdown">
                  <a href="#">Item</a>
                  <ul class="dropdown-content">
                     <li><a href="#">Sub Item</a></li>
                     <li><a href="#">Sub Item</a></li>
                  </ul>
               </li>
               <li><a href="#">Item</a></li>
               <li><a href="#">Item</a>
               <li>
            </ul>
         </nav>
         <div style="clear:both;"></div>
      </header>
   </body>
</html>

＆＃13;

更新

作为@A。艾哈迈德提到，你也可以插入这条规则：

ul {
    list-style-type: none;
}

美化设计。

导航栏不显示内嵌标题文本

我想做什么

HTML和CSS

什么破坏了代码

3 个答案:

更新