首页 文章

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

提问于
浏览 次
0

https://jsfiddle.net/qnw7a9zk/

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

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

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

<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%;
}
html css

3 回答

  • 0

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

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

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

    回复于
  • 1

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

    回复于
  • 0

    你可以通过 display: inline-block 这样做

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

    <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>
    回复于

相关问题