当浏览器变小时,在导航栏下推送响应式导航链接

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (7)

我正在尝试创建一个响应式网站。我在页面顶部有一个导航栏,右侧是链接,左侧是社交媒体图标。当我使浏览器变小时,它会推动导航栏下的链接,就好像它被推入另一个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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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

希望导航能够响应右侧的链接和左侧的社交图标。

提问于
用户回答回答于

你的代码非常糟糕。查看我在CSS中修复并添加了多少属性。学得更好。

#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;
  box-sizing: border-box;
}

#navInnerWrapper {
  /* width: auto; */
  /* height: auto; */
  /* display: block; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* position: relative; */
  /* clear: both; */
  /* padding-right: 200px; */
  /* padding: 20px 0; */
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
}

#topSocials {
  /* width: 231px; */
  /* display: block; */
  /* position: relative; */
  /* float: left; */
  /* height: auto; */
  /* padding-top: 5px; */
  /* padding-left: 50px; */
  display: flex;
  flex-direction: column;
  padding: 10px;
}

#navBar {
  /* width: 600px; */
  /* display: block; */
  /* position: relative; */
  /* float: right; */
  /* height: auto; */
  /* color: #FFFFFF; */
  /* text-align: right; */
  text-transform: uppercase;
  padding: 10px;
}

ul {
  list-style-type: none;
  display: flex;
  flex-flow: wrap;
  padding: 0;
  margin: 0;
}

ul li {
  /* display: inline; */
  /* padding-left: 40px; */
  margin-left: 20px;
}

ul li:first-child {
  margin-left: 0px;
}

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

<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>

所属标签

可能回答问题的人

  • uncle_light

    5 粉丝518 提问7 回答
  • 学生

    3 粉丝476 提问7 回答
  • o o

    4 粉丝494 提问5 回答
  • 富有想象力的人

    3 粉丝0 提问5 回答

扫码关注云+社区

领取腾讯云代金券