Question

我正试图将导航栏放在中间，侧面放置社交媒体图标。我已经查找了这个问题的其他解决方案，但是没有人也希望将图标放在一边。

如果我尝试向左浮动导航栏，向右浮动图标，它有点工作，但导航栏不在中心，如果我要更改窗口的大小（响应性）酒吧的休息。

我只能将图标移到右侧，但不能与导航栏位于同一行，并且它们位于其下方。

<div class="wrapper">
  <img class="logo" src="Logo.png" />
  <nav>
    <ul class="nav">
      <li class="navlist"><a href="#">Properties</a></li>
      <li class="navlist"><a href="#">The Team</a></li>
      <li class="navlist"><a href="#">Contact Us</a></li>
    </ul>
    <div class="imgs">
      <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a>
    </div>
  </nav>
</div>
<footer>
  <p class="buttons">Real estate</p>
</footer>
</body>


body {
  background-color: #ffffff;
  margin: 0;
  display: table;
  height: 100%;
  width: 100%;
  background-image: url(nice.jpg);
  background-size: 100% 100%;
  overflow: auto;
}

.wrapper {
  text-align: center;
  padding: 0px;
  height: auto;
  width: 100%;
}

footer {
  background-color: #cbb492;
  display: table-row;
  height: 2px;
  text-align: center;
}

li a {
  text-decoration: none;
  font-variant: small-caps;
  color: black;
}

li:hover {
  background-color: #cbb492;
}

nav {
  width: 100%;
  position: absolute;
  top: 0px;
  padding-bottom: 2px;
  padding-top: 2px;
  background-color: whitesmoke;
}

.logo {
  height: 28px;
  width: 90px;
  padding-top: 50px;
}

p {
  color: white;
  font-size: 6px;
  text-align: left;
  padding-left: 20px;
}

.navlist {
  display: inline;
  padding-left: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 30px;
  padding-top: 3px;
  padding-bottom: 2.4px;
}

.nav {
  list-style: none;
  padding: 0;
  width: 100%;
  margin: 0;
  top: 0px;
}

.imgs {
  list-style: none;
  margin: 0;
  display: block;
  padding-left: 0px;
  float: right;
  width: 30%;
}

.imgs img {
  width: 9%;
  height: 9%;
}

Answer 1

你应该尝试将.imgs-div提高一级。比它应该更容易。一种方法可以是flexbox模型。所以包装容器得到

display: flex;
flex-direction: row;
justify-content: space-between;

我刚做了一些编辑。这是你想要实现的目标吗？ https://jsfiddle.net/qnw7a9zk/6/

Answer 2

您已将width:100%提供给.nav，因此它占据了全宽并向下推送图片。保持导航和图像中的宽度比率。与80%导航和20 %图片类似，请参阅小提琴 https://jsfiddle.net/qnw7a9zk/5/

Answer 3

您可以display: inline-block

执行此操作

＆＃13;

body {
  background-color: #ffffff;
  margin: 0;
  display: table;
  height: 100%;
  width: 100%;
  background-image: url(nice.jpg);
  background-size: 100% 100%;
  overflow: auto;
}

.wrapper {
  text-align: center;
  padding: 0px;
  height: auto;
  width: 100%;
}

footer {
  background-color: #cbb492;
  display: table-row;
  height: 2px;
  text-align: center;
}

li a {
  text-decoration: none;
  font-variant: small-caps;
  color: black;
}

li:hover {
  background-color: #cbb492;
}

nav {
  padding-bottom: 2px;
  padding-top: 2px;
  background-color: whitesmoke;
  text-align: center
}

.logo {
  height: 28px;
  width: 90px;
}

p {
  color: white;
  font-size: 6px;
  text-align: left;
  padding-left: 20px;
}

.navlist {
  display: inline;
  padding-left: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 30px;
  padding-top: 3px;
  padding-bottom: 2.4px;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.imgs {
  list-style: none;
  margin: 0;
  display: inline-block;
  padding-left: 0;
  
}

＆＃13;

<div class="wrapper">
  
  <nav>
    <ul class="nav">
      <li class="navlist"><a href="#">Properties</a></li>
      <li class="navlist"><a href="#">The Team</a></li>
      <li class="navlist"><a href="#">Contact Us</a></li>
    </ul>
    <div class="imgs">
      <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a>
      <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a>
    </div>
  </nav>
  <img class="logo" src="Logo.png" />
</div>
<footer>
  <p class="buttons">Real estate</p>
</footer>
</body>

＆＃13;

如何居中导航栏，并将社交媒体图标放在一边

3 个答案: