Question

我一直试图在导航部分中以相同的对齐方式引入两个div。我已经添加了左右浮动，但是没有用。如图所示，它们之间总有2或3像素的间隙： http://postimg.org/image/lgtxebtpx

@charset "utf-8";
/* CSS Document */

body {
  font-family: 'My Font', Fallback, sans-serif; 
  font-size: 18px;
  padding: 0; 
  margin: 0; 
}

@font-face {
	font-family: 'My Font'; 
	src: url(althea/Althea-Regular.ttf); 
}

.nav {
	padding: 0; 
	margin: 0; 
	width: 100%; 
	background: #0F97D0;
}

.navcontain {
	padding: 0; 
	margin: 0 auto; 
	width: 1200px; 
}

.nav a {
	text-decoration: none; 
	color: #FFFFFF;
}

.logo {
	float: left; 
	    display: inline-block;
	width: 300px;
}

.menu {
	padding: 0; 
	margin: 0; 
	overflow: hidden;  
	width: 900px;
}

.menu ul {
	float: right; 
}


.menu ul li {
	list-style: none; 
	    display: inline-block;
	float: left;  
}

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Testing Bro Testing</title>
      <link type="text/css" rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="page">
         <!-- ========================== Nav Section ================================ --> 
         <div class="nav">
            <div class="navcontain">
               <div class="logo">
                  <a href="#">Logo Name</a>
               </div>
               <!-- logo --> 
               <div class="menu">
                  <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#">Portfolio</a></li>
                     <li><a href="#">Blog</a></li>
                     <li><a href="#">Contact Us</a></li>
                  </ul>
               </div>
               <!-- Menu --> 
            </div>
            <!-- Nav Contain --> 
         </div>
         <!-- Nav --> 
         <!-- ========================== Hero Image ================================ --> 
         <div class="hero">
            <p>This is a sample Page</p>
            <a href="#" class="button">Know More Button</a>
         </div>
         <!-- Hero image --> 
         <!-- ======================== responsive design ============================ --> 
         <div class="responsive">
            <div class="responsivecontain">
               <div class="leftcontent">
                  <h2>Responsive Design</h2>
                  <p>Stone template is provided by templatemo website. 
                     Credits go to Smashing Magazine for Art Professions Icon Set and Unsplash for images. 
                     Praesent imperdiet orci se ante vehicula pulvinar. Morbi adipiscing molestie iaculis. 
                     Maecenas accumsan gravida est, quis placerat neque ullamcorper vitae. 
                  </p>
                  <p>Stone template is provided by templatemo website. 
                     Credits go to Smashing Magazine for Art Professions Icon Set and Unsplash for images. 
                     Praesent imperdiet orci se ante vehicula pulvinar. Morbi adipiscing molestie iaculis. 
                     Maecenas accumsan gravida est, quis placerat neque ullamcorper vitae. 
                  </p>
               </div>
               <div class="rightcontent">
               </div>
            </div>
            <!-- responsive contain --> 
         </div>
         <!-- responsive --> 
      </div>
      <!-- page --> 
   </body>
</html>

Answer 1

您必须修改以下CSS类：

.navcontain {
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
}

.logo {
    float: left; 
    display: inline-block;
    width: auto;
    line-height: 57px;
}

.menu {
    padding: 0; 
    margin: 0; 
    overflow: hidden;  
    width: auto;
}

水平对齐徽标和导航链接

1 个答案: