Aligning Logo and Nav Links Horizontally

问题

I have been trying to bring two divs in the nav section in the same alignment. I have added float right and left, but that didn't work. There is always 2 or three pixels gap between them as you can see in the image: 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>

回答1:

You have to modify following CSS classes:

.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;
}

来源：https://stackoverflow.com/questions/32744453/aligning-logo-and-nav-links-horizontally

标签

html

css