html - 使用 BassCSS 和 CSS3 的顶部导航

Question

我一直在尝试模仿我认为很棒的顶部导航设计。顶部导航来自此网站:Giphy

对于我的布局，我一直使用 BassCSS 最新版本，即 Basscss v8.0.1。这是我到目前为止所拥有的:

HTML:

  <div class="clearfix xs-hide mx-auto bg-white flex flex-justify md-col-12 lg-col-8 mb1">
    <div class="col mx-auto center border-bottom border-red strong-border px3">
      <a href="" class=" caps bold red h4 text-decoration-none">Home</a>
    </div>
    <div class="col mx-auto center border-bottom border-green strong-border px3">
      <a href="" class=" caps bold green h4 text-decoration-none">Categories</a>
    </div>
    <div class="col mx-auto center border-bottom border-purple strong-border px3">
      <a href="" class=" caps bold purple h4 text-decoration-none">Tags</a>
    </div>
    <div class="col mx-auto center border-bottom border-aqua strong-border px3">
      <a href="" class=" caps bold aqua h4 text-decoration-none">Information</a>
    </div>
    <div class="col mx-auto center border-bottom border-yellow strong-border px3">
      <a href="" class=" caps bold yellow h4 text-decoration-none">Search</a>
    </div>
  </div>
  <div class="clearfix xs-hide flex mx-auto md-col-12 lg-col-8 mb1">
    <label for="search-input" class="hide">Search</label>
    <input
      type="search"
      id="search-input"
      class="flex-auto py1 px1 m0 field not-rounded"
      placeholder="Search term">
    <button class="border black bg-aqua not-rounded">Go</button>
  </div>

BassCSS 的CSS 文件可以在官方网站上找到(我不能发布超过两个链接)。我只是扩展了一些小东西:

.strong-border{
  border-bottom-width: 5px;
}

这让我渴望强大的边界。你可以在 codepen 中看到我的版本。这就是我已经拥有的，但由于那个空白问题(在链接之前有一些空白)，它不像原来的那样好看，这是因为链接在它们的容器中居中造成的。另外，我不希望背景颜色是黑色，所以我希望它在白色上看起来很棒。

你能帮我让它更像原版吗？

顺便说一句，这是一个codepen link上面有我的版本，这样您就可以继续观看/播放它。 :-)

Answer 1

你可以使用 :first-child和 :last-child指定您不希望在四肢项上分别留出边距。

像这样:

div.mb1 div:first-child {
  margin-left: 0;
}
div.mb1 div:last-child {
  margin-right: 0;
}

其中 div.mb1 是父级，因此属性在第一个和最后一个子级 div 上指定。

这是 updated codepen .

希望我做对了问题。