css - 带彩色条的水平菜单

Question

我正在尝试创建一个带有菜单的页眉，如下图所示。

我正在创建导航，因此每个链接区域(蓝色(矩形？))都是一个 <li> .但我将元素垂直堆叠。

这是 jsFiddle .

<header>
<div id="area-logo">
    <div class="header-ribbon"></div>
    <div class="container bg-white"></div>
</div>
<nav id="main-menu">
    <ul>
        <li id="link-a-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link a</a>

            </div>
        </li>
        <li id="link-b-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link b</a>

            </div>
        </li>
        <li id="link-c-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link c</a>

            </div>
        </li>
        <li id="link-d-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link d</a>

            </div>
        </li>
        <li id="link-e-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link e</a>

            </div>
        </li>
        <li id="link-f-link">
            <div class="header-ribbon"></div>
            <div class="container bg-white"> <a href="#">link f</a>

            </div>
        </li>
    </ul>
</nav>

    header {
    background-color: #787aad;
    height: 126px;
}

header .header-ribbon {
    height: 6px;
}

header .bg-white {
    background-color: #ffffff;
}

#area-logo {
    float: left;
}

#main-menu ul {
    margin-left: auto;
    margin-right: 0px;
    padding: 0;
    list-style-type: none;
    text-align: center;
    width: auto;
}

#main-menu ul li {
    display: inline;
}

我需要每个链接和 Logo 区域上的彩色条具有相同大小的链接区域，因此如果我放置更大的文本，它的宽度也会增加。

我该怎么做？

更新

实际上，jsFiddle 上的更新代码确实解决了我的问题。然而，这让我在新的 Microsoft Edge 浏览器上发现了一个渲染错误，因为它向 <li> 添加了 1px。边框顶部。

Answer 1

对于 li，您需要将 display: inline; 更改为 display: inline-block;。当然，您需要更改更多 CSS 以使元素看起来更像图片，但这就是您所要求的要点。

为了在每个链接上添加彩色条，我向每个 li 添加了一个 border-top: 6px solid #787aad;。我认为这就是您希望 .header-ribbon 执行的操作，但我将样式设置为 display: none; 以消除间隙。如果你愿意，你可以重新显示 .header-ribbon，并为它们添加样式 background-color: #787aad; 以达到相同的效果将 border-top 添加到每个 li。

header {
  background-color: #444444;
  height: 126px;
}
header .header-ribbon {
  height: 6px;
  display: none;
}
header .bg-white {
  background-color: #ffffff;
}
#area-logo {
  float: left;
}
#main-menu ul {
  margin-left: auto;
  margin-right: 0px;
  padding: 0;
  list-style-type: none;
  text-align: center;
  width: auto;
}
#main-menu ul li {
  border-top: 6px solid #787aad;
  display: inline-block;
}

<header>
  <div id="area-logo">
    <div class="header-ribbon"></div>
    <div class="container bg-white"></div>
  </div>
  <nav id="main-menu">
    <ul>
      <li id="link-a-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link a</a>

        </div>
      </li>
      <li id="link-b-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link b</a>

        </div>
      </li>
      <li id="link-c-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link c</a>

        </div>
      </li>
      <li id="link-d-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link d</a>

        </div>
      </li>
      <li id="link-e-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link e</a>

        </div>
      </li>
      <li id="link-f-link">
        <div class="header-ribbon"></div>
        <div class="container bg-white"> <a href="#">link f</a>

        </div>
      </li>
    </ul>
  </nav>

编辑 #1: 至于扩展 Logo 元素，您可以将 width: 50%; 添加到 #area-logo 和 #main-menu 元素。您可能还需要向它们添加 display: block;。