当浏览器变小时，在导航栏下推送响应式导航链接
当浏览器变小时，在导航栏下推送响应式导航链接
提问于 2019-06-04 04:38:45
我正在尝试创建一个响应式的网站。我在页面顶部有一个导航栏，右边是链接，左边是社交媒体图标。当我将浏览器变小时，它会将导航栏下的链接推入，就好像它被推到了另一个div中一样。
我认为是社交图标导致了这个问题。它们是多个div中的两个不同的div。如果我移除社交图标，它可以工作，但我想保留左上角的社交图标。
<body>
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="topSocials">
<a href="URL"><img alt="facebook icon" src="images/fb_social.png"></a>
<a href="URL"><img alt="linkedin icon" src="images/linkedin_social.png"></a>
</div>
<div id="navBar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
#outerWrapper {
width: 100%;
height: auto;
display: block;
position: relative;
color: #333333;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu
Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: left;
line-height: 20px;
}
#navWrapper {
width: 100%;
height: 45px;
display: block;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
clear: both;
border-bottom: 3px solid #000000;
background-color: #9FA2B2;
}
#navInnerWrapper {
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
padding-right: 200px;
}
#topSocials {
width: 231px;
display: block;
position: relative;
float: left;
height: auto;
padding-top: 5px;
padding-left: 50px;
}
#navBar {
width: 600px;
display: block;
position: relative;
float: right;
height: auto;
color: #FFFFFF;
text-align: right;
text-transform: uppercase;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding-left: 40px;
}
#navBar a:link {color: #16262E; text-decoration: none; }
#navBar a:visited {color: #16262E; text-decoration: none; }
#navBar a:hover {color: #FFFFFF; text-decoration: none; }
#navBar a:active {color: #16262E; text-decoration: none; }这就是我缩小浏览器后的样子。https://imgur.com/a/BLSilIp
希望导航响应右侧的链接和左侧的社交图标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56434265
复制相关文章
相似问题