水平对齐徽标和导航链接 [英] Aligning Logo and Nav Links Horizontally
本文介绍了水平对齐徽标和导航链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直试图在导航区域中以相同的对齐方式引入两个div.我添加了左右浮动，但这没有用.如您在图像中所见，它们之间总是有2或3个像素的间隙: http://postimg.org/image/lgtxebtpx
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>推荐答案
您必须修改以下CSS类:
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;
}
这篇关于水平对齐徽标和导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
