导航栏只有两个按钮，一个在左边，一个在右边，中间是一个矩形的logo？ [关闭]答案

【问题标题】：Navbar with only two buttons, one on the left and one to the right, and a rectangular logo in the middle? [closed]导航栏只有两个按钮，一个在左边，一个在右边，中间是一个矩形的logo？ [关闭]
【发布时间】：2018-07-19 20:45:33
【问题描述】：

我对 StackOverflow 非常陌生，对 HTML/CSS 也比较陌生。正如标题所暗示的那样，我的问题是如何制作一个只有两个按钮“菜单”和“联系我们”的导航栏，菜单在左侧，在右侧与我们联系，并在中间放置一个矩形徽标?我一直在网上搜索，总有一些地方我卡住了，所以我必须全部重做。我正在使用引导程序，并且我知道要对齐，我需要将每个浮动到其预期位置。但是由于我是新手，所以我总是会遇到一些概念。有人可以告诉我如何构建这个导航栏吗？有或没有 Bootstrap。

【问题讨论】：

欢迎来到 SO。请浏览help centre 以查看how to ask a good question 以及该站点的on topic 的问题类型。如果您不提供任何代码，我们将无法为您提供帮助 - 请参阅如何创建 minimal reproducible example
您应该真正包含您的代码、您遇到的具体问题等。Stackoverflow 不是编码服务，但我们可以为您指明正确的方向。

标签： javascript html css bootstrap-4

【解决方案1】：

您可以从这里开始：NavBar

或者您可以查看使用上述指南制作的这个sn-p：

您可以根据需要编辑此 NavBar，如果您想了解有关 FlexBox 的更多信息，我建议您查看文章。

main {
   width: 70%
}
ul {
  padding: 0;
  list-style: none;
}
.twitter {
  display: flex;
}
.twitter__bird {
  margin-left: auto;
  margin-right: auto
}

.twitter {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  color: rgba(117,117,117 ,1);
  box-shadow: 5px 10px 20px -20px rgba(85,172,238 ,1);
}
.twitter li {
  cursor: pointer;
}
.twitter li:hover{
  color: rgba(85,172,238 ,1);
}
.twitter__bird {
  color: rgba(85,172,238 ,1);
  font-size: 1.3em;
}
.twitter li:not(:last-child):not(.twitter__bird) {
  margin-right: 10px;
}
.twitter li  i:not(.fa-twitter):not(.fa-search):not(.fa-user-circle-o) {
  margin-right: 3px;
}
.twitter li > button {
  font-size: 0.8em;
  border: 0;
  background: rgba(85,172,238 ,1);
  color: #fff;
  border-radius: 100px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul class="twitter" role="navigation">
  <li><i class="fa fa-home"></i>Home</li>
  <li class="twitter__bird"><i class="fa fa-twitter"></i></li>
  <li><i class="fa fa-users"></i>Contact Us</li>
</ul>

【讨论】：