Question

目前，我的网站中间有徽标，右侧导航如下所示。但是我希望它左边有社交图标，中间有徽标，右边有导航，因此我该怎么做？我一直在尝试和失败。

感谢任何帮助，谢谢。

HTML

   <div id="nav-div">
        <ul>
            <h1>JOSH TAYLOR</h1>
            <li><a href="">Contact</a></li>
            <li><a href="">CV</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Home</a></li>
        </ul>
    </div>

CSS

#nav-div {
    opacity: 1;
    font-size: 15px;
    }

#nav-div h1{
color: lightskyblue;
cursor: pointer;
margin-top: 0px;
margin-bottom: 0px;
font-size: 30px;
float: left;
margin-left: 460px;
width: 200px;
}

#nav-div h1:hover{
color: white;
transition:all 0.40s;
}

#nav-div ul{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background: ;
line-height: 80px;
border-bottom: px solid black;
}

#nav-div ul a{
text-decoration: none;
color: lightskyblue;
padding: 25px;
}

#nav-div ul a:hover{
color:white;
transition:all 0.40s;
font-style:italic;
}

#nav-div ul li {
list-style-type: none;
display: inline-block;
float: right;
font-style:normal; 
font-size: 13px;
margin-top: 1px;
}

Answer 1

使用flexbox，您可以使用div或header，并将这三个元素包含在内，并为其提供justify-content:space-around Fiddle，其余部分用于演示目的。希望这会有所帮助。

.flex{
  display:flex;
  justify-content: space-around;
  height: 100px;
  align-items: center;
  border: 1px solid black;
}

.flex .social{
  list-style: none;
  padding: 0;
}

.flex .social li{
  display: inline-block;
}

.flex nav ul{
  list-style: none;
  align-items: center;
  padding: 0;
}
.flex nav ul li{
   display: inline-block;
}

.flex nav ul li a{
   text-decoration: none;
}

<header class="flex">
  <ul class="social">
    <li>SOCIAL</li>
    <li>SOCIAL</li>
    <li>SOCIAL</li>
  </ul>
  
  <img src="http://placehold.it/100x100" alt="">
  
  <nav>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </nav>
</header>

Answer 2

你可以使用Bootstrap并将所有三个包含在带有类行的div中，并将类col-md-4添加到所有子div（如果你想为移动用户提供更好的结果，用ms代替md）。

如何制作，以便左侧可以显示社交图标，中间有徽标，右侧有导航？

2 个答案: