Question

我正在尝试使用菜单创建页眉，如下图所示。

我正在创建导航，因此每个链接区域（蓝色（矩形？））都是<li>。但我正在垂直堆放物品。

<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;
}

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

我该怎么做？

更新

实际上，jsFiddle上的更新代码确实解决了我的问题。但是，这导致我在新的Microsoft Edge浏览器上找到了一个渲染错误，因为它向<li> border-top添加了1px。

Answer 1

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

要在每个链接上显示彩色条，我为每个li添加了border-top: 6px solid #787aad;。我认为你想要li做什么，但我将样式设置为.header-ribbon以消除差距。如果您愿意，可以重新显示display: none;，并为其添加样式.header-ribbon，以达到向每个background-color: #787aad;添加border-top的效果。

＆＃13;

li

＆＃13;

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;
}

＆＃13;

编辑＃1：对于展开徽标元素，您可以将<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>添加到width: 50%;和#area-logo元素。您还可能需要向其添加#main-menu。

Answer 2

附加的是你应该用来使东西正确对齐的CSS。我反对使用display: inline-block，因为在这种情况下你应该使用浮点数。

这是一个JSFiddle：http://jsfiddle.net/vrc4qhbn/2/

header {
    position: relative;
    }
    header *,
    header *:before,
    header *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
        }

    #area-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px; /* Whatever youre value should be here */
        }
    #main-menu {
        width: 100%;
        padding-left: 165px; /* Width of your logo plus spacing */
        }
        #main-menu > ul {
            float: right; /* Have navigation to the right */
            }
            #main-menu > ul > li {
                display: block; /* Make a block element */
                float: left; /* Each navigation item from the left */
                }

Answer 3

使用以下代码更新您的CSS：

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

带彩色条的水平菜单

更新

3 个答案: