我正试图使我的社交导航栏位于我已实现的主导航栏上方，但是我现在面临的问题是页面的主要内容与导航栏重叠。 如果我在主体上添加填充，只会使导航栏在页面上向下移动。
我一生无法找到问题所在。.很抱歉，我现在正在学习，所以请不要太苛刻。任何帮助将不胜感激。
body {
padding: 50px;
}
.topnav {
text-align: right;
font-family: 'Quicksand', sans-serif;
background: #f4f5eb;
padding: 0 20px;
margin: 0;
overflow: hidden;
}
.social li {
text-align: right;
list-style: none;
display: inline-block;
}
a {
text-decoration: none;
padding: 0 10px;
color: grey;
font-size: 15px;
}
a:hover {
color: rgb(17, 240, 17);
}
.social1 {
font-size: 10px;
color: black;
padding: 5px;
}
.main-nav {
text-align: center;
font-family: 'Quicksand', sans-serif;
padding: 0 40px;
margin: 0;
overflow: hidden;
padding: 15px;
float: left;
}
.main li {
text-align: center;
list-style: none;
display: inline-block;
}
.main1 {
color: black;
}
#logo {
float: left;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 7 !important;
}
.dropdown-content a {
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: rgb(17, 240, 17);
}
.dropdown:hover .dropdown-content {
display: block;
}<header>
<nav class="topnav">
<div class="topnav-social">
<ul class="social">
<li><a href="https://www.egis-group.com/social-wall">Social Wall</a></li>
<li>
<a href="https://www.egis-group.com/rss.xml" i class="fas fa-rss"></i>
</a>
</li>
<li>
<a href="https://vimeo.com/channels/egis" i class="fab fa-vimeo-v"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC7htuNSYHgMDr5wkoQMD8lQ" i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://twitter.com/egis" i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/company/egis" i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="http://fr.viadeo.com/fr/company/egis?gaid=2012012300803" i class="fab fa-viadeo"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/egisgroup" i class="fab fa-facebook-f"></i>
</a>
</li>
<li><a class="social1" href="https://www.egis-group.com/talent/join-us" target="_blank">Join Us</a></li>
<li><a class="social1" href="https://www.egis-group.com/contact" target="_blank">Contact</a></li>
<li><a class="social1" href="https://www.egis-group.com/publications" target="_blank">Publications</a></li>
</ul>
</div>
</nav>
<div id=logo>
<a href="http://egism40.com"><img src="images/logo.jpg" width="350" height="100" alt="Brand"></a>
</div>
<nav class="main-nav">
<div class="mainnav-head">
<ul class="main">
<li><a class="main1" href="index.php">Home</a></li>
<?php if((isset($_SESSION['username']) || isCookieValid($db))): ?>
<li><a href="profile.php">my profile</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Skills By Shift</a>
<div class="dropdown-content">
<a href="pages/tm.php">Traffic Management</a>
<a href="#">Lead Installers/Fiss</a>
<a href="#">Licenses</a>
<a href="#">Other Skills</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Risk Assessments/Method Statements</a>
<div class="dropdown-content">
<a href="pages/tm.php">Traffic Management</a>
<a href="#">VSF/Barrier</a>
<a href="#">C'way Repairs</a>
<a href="#">Equiptment</a>
</div>
</li>
<li><a href="logout.php">Logout</a></li>
<?php else: ?>
<li><a class="main1" href="">Blog</a></li>
<li><a class="main1" href="">About</a></li>
<li><a class="main1" href="">Egis Projects</a></li>
<li><a class="main1" href="login.php">Login</a></li>
<?php endif ?>
</ul>
</div>
</nav>
</header>
答案 0 :(得分：1)
您可以使用flexbox实现此目的。
<div class="full-nav-wrapper">
<div class="social-nav-wrapper">
<div class="social-nav-left">
<a href="#">Social Wall</a>
</div>
<div class="social-nav-right">
<a href="#">Join Us</a>
<a href="#">Contact</a>
<a href="#">Publications</a>
</div>
</div>
<div class="main-nav-wrapper">
<div class="main-nav-logo">
<img src="https://via.placeholder.com/140x100">
</div>
<div class="main-nav-links">
<a href="#">Home</a>
<a href="#">My Profile</a>
<a href="#">Skills By Shift</a>
<a href="#">Risk Assessments/Method Statements</a>
<a href="#">Logout</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Egis</a>
<a href="#">Projects</a>
<a href="#">Login</a>
</div>
</div>
</div>
CSS
a {
color:white;
}
.full-nav-wrapper {
border:2px solid purple;
}
.social-nav-wrapper {
background-color:blue;
display:flex;
justify-content: space-between;
}
.social-nav-left {
}
.social-nav-right {
}
.main-nav-wrapper {
background-color:pink;
display:flex;
justify-content: space-between;
align-items:center;
}
.main-nav-logo {
display:flex;
flex-grow: 1;
}
.main-nav-logo > img {
width: 50px;
height: 50px;
}
.main-nav-links {
display:flex;
justify-content: space-around;
flex-grow:3;
}
尽管有很多链接，所以您需要使用响应技术来在手机上正确显示。
@media (max-width:767px) {
.main-nav-wrapper {
flex-wrap: wrap;
}
.main-nav-links {
display: flex;
justify-content: space-around;
}
.main-nav-logo {
justify-content: center;
}
.main-nav-links {
flex-wrap: wrap;
}
}
我认为这是您想要实现的。 我给div上色了，这样您就可以返回并了解我的所作所为。 如果您觉得这段代码有些容易理解，请在flexbox上学习。