时间戳

首页 > 解决方案 > 导航栏只有两个按钮，一个在左边，一个在右边，中间是一个矩形标志？

javascript - 导航栏只有两个按钮，一个在左边，一个在右边，中间是一个矩形标志？

问题描述

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

标签： javascripthtmlcssbootstrap-4

解决方案

您可以从这里开始：NavBar

或者您可以查看使用上述指南制作的此代码段：

您可以根据需要编辑此 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>

推荐阅读