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。

希望我能解决问题。

使用BassCSS和CSS3进行顶级导航

1 个答案: