Question

我在这里有一个示例导航栏：http://jsfiddle.net/HBXku/447/。

我想让border-top多彩元素粘贴到导航栏部分的顶部（不要在导航栏顶部浮动XX px）。我还希望尽可能多地垂直对齐项目的文本。经过几个小时的尝试，我无法取得任何结果......

Answer 1

我并不完全明白需要做什么，但看起来像是这样的

body {
  padding: 0;
  margin: 0;
}

.navigation {
  position: fixed;
  width: 100%;
}

.navigation-list-item {
    flex-grow: 1;
    padding: 10px 20px;
    background: #292929;
    list-style: none;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation-list {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
}

.navigation-list-item a {
    color: white;
    text-decoration: none;
    text-align: center;
}

.navigation-list-item.menu1 {
    border-top: 10px solid #ccad09;
}
.navigation-list-item.menu2 {
    border-top: 10px solid #cc7e39;
}
.navigation-list-item.menu3 {
    border-top: 10px solid #cc374b;
}
.navigation-list-item.menu4 {
    border-top: 10px solid #cc00b0;
}
.navigation-list-item.menu5 {
    border-top: 10px solid #c653cc;
}
.navigation-list-item.menu6 {
    border-top: 10px solid #5e2ecc;
}
.navigation-list-item.menu7 {
    border-top: 10px solid #3d47cc;
}
.navigation-list-item.menu8 {
    border-top: 10px solid #0a8ecc;
}

<div class="topbar clearfix">
    <nav class="navigation">
        <ul class="navigation-list">
            <li class="navigation-list-item menu1"><a href="#works">Menu item1</a></li>
            <li class="navigation-list-item menu2"><a href="#features">Menu item2</a></li>
            <li class="navigation-list-item menu3"><a href="#opinions">Menu item3</a></li>
            <li class="navigation-list-item menu4"><a href="#blog">Menu item4</a></li>
            <li class="navigation-list-item menu5"><a href="#company">Menu item5</a></li>
            <li class="navigation-list-item menu6"><a href="#team">Menu item6</a></li>
            <li class="navigation-list-item menu7"><a href="#prices">Menu item7</a></li>
            <li class="navigation-list-item menu8"><a href="#contact">Menu item8</a></li>
        </ul>
    </nav>
</div>

不带徽标

body {
  padding: 0;
  margin: 0;
}
.logo {
    width: 80px;
    float: left;
}
.topbar {
  position: fixed;
  width: 100%;
}

.navigation-list-item {
  display: table-cell;
  padding: 10px 20px;
  background: #292929;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  text-align: center;
}

.navigation {
    position: absolute;
    width: 60%;
    margin: auto;
    left: 0;
    right: 0;
}

.navigation-list {
    padding: 0;
    display: table;
    width: 100%;
    margin: 0 auto;
}

.navigation-list-item a {
    color: white;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}

.navigation-list-item.menu1 {
    border-top: 10px solid #ccad09;
}

.navigation-list-item.menu2 {
    border-top: 10px solid #cc7e39;
}
.navigation-list-item.menu3 {
    border-top: 10px solid #cc374b;
}
.navigation-list-item.menu4 {
    border-top: 10px solid #cc00b0;
}
.navigation-list-item.menu5 {
    border-top: 10px solid #c653cc;
}
.navigation-list-item.menu6 {
    border-top: 10px solid #5e2ecc;
}
.navigation-list-item.menu7 {
    border-top: 10px solid #3d47cc;
}
.navigation-list-item.menu8 {
    border-top: 10px solid #0a8ecc;
}

<div class="topbar clearfix">
  <div class="logo">
    <img src="https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="">
  </div>
  <nav class="navigation">
    <ul class="navigation-list">
      <li class="navigation-list-item menu1"><a href="#works">Menu item1</a></li>
      <li class="navigation-list-item menu2"><a href="#features">Menu item2</a></li>
      <li class="navigation-list-item menu3"><a href="#opinions">Menu item3</a></li>
      <li class="navigation-list-item menu4"><a href="#blog">Menu item4</a></li>
      <li class="navigation-list-item menu5"><a href="#company">Menu item5</a></li>
      <li class="navigation-list-item menu6"><a href="#team">Menu item6</a></li>
      <li class="navigation-list-item menu7"><a href="#prices">Menu item7</a></li>
      <li class="navigation-list-item menu8"><a href="#contact">Menu item8</a></li>
    </ul>
  </nav>
</div>

Answer 2

你只需要添加

.navigation-list{
   margin: 0;
   padding:0;
}

因为该类被添加到ul并且默认情况下ul在浏览器中具有边距

项目的顶部边框粘贴到导航栏的顶部

2 个答案: