我一直在尝试将导航部分中的两个 div 以相同的方式对齐。我已经添加了左右浮动，但这不起作用。正如您在图像中看到的那样，它们之间始终存在 2 或 3 个像素间隙：http://postimg.org/image/lgtxebtpx 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 类：
.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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
