Question

缩小浏览器后，将第三行（电话号码）推到导航栏下方

尝试使用浮动，内联代码，并且代码与社交图标相同（左上）。社交图标（左上方）和导航链接（中心）有效，但电话号码部分（右上方）无效

<body>
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">

    <div id="topSocials">
        <a href="URL" target="_blank"><img alt="facebook icon" 
src="images/fb_social.png"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="URL" target="_blank"><img  alt="linkedin icon" 
src="images/linkedin_social.png"></a>
        </div>

    <div id="navBar">
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>
        </div>

    <div id="topNumber">
    <a href="tel:+15555555555">CALL US! 555-555-5555</a>
    </div>
</div>
</div>

#navWrapper {
  width: 100%;
  border-bottom: 3px solid #000000;
  background-color: #9FA2B2;
  box-sizing: border-box;
}

#navInnerWrapper {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
}

#topSocials {
  flex-direction: column;
  padding: 10px;
}

#navBar {
  text-transform: uppercase;
  padding: 10px;
}
#topNumber {
  flex-direction: column;
  padding: 10px;
}

#topNumber a:link {
  color: #16262E;
  text-decoration: none;
}

#topNumber a:visited {
  color: #16262E;
  text-decoration: none;
}

#topNumber a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

#topNumber a:active {
  color: #16262E;
  text-decoration: none;
}

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

ul li {
  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;
}

希望社交图标，导航链接和电话号码都在同一行上响应。 https://imgur.com/a/XeF6WnG

响应式导航栏将第三行推到导航链接下方

0 个答案: