Html 我该怎么做才能在左边有社交图标，中间有logo，右边有导航？ 现在我有我的网站，中间有徽标，右边有导航，如下所示。但是，我希望它有左边的社会图标，中间的标志，右边的导航，因此我怎么做？我一直在努力，但失败了

谢谢你的帮助

HTML

---

您可以使用Bootstrap，将所有三个类都包含在一个带有类行的div中，并将类col-md-4添加到所有子div中（如果您希望为移动用户提供更好的结果，请将md替换为xs）.

使用，您可以有一个flex

div

或

标题

，将三个元素括在其中，并给它一个

对齐内容：周围的空间

其余部分用于演示目的。希望这有帮助

.flex{
显示器：flex；
证明内容：周围的空间；
高度：100px；
对齐项目：居中；
边框：1px纯黑；
}
.flex.社交{
列表样式：无；
填充：0；
}
.flex.社会李{
显示：内联块；
}
.flex nav ul{
列表样式：无；
对齐项目：居中；
填充：0；
}
.flex nav ul li{
显示：内联块；
}
.flex nav ul li a{
文字装饰：无；
}

社会的
社会的
社会的

FlexBox将解决这个问题，我认为缺少一些代码。我看不到任何社会标志……或是标志。@Daniel你说得对。这是自举。我将编辑我的答案。

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

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