Question

我可以请求这个水平导航栏的帮助吗？我尝试使用你们之前教给我的有关垂直导航栏的内容，但我无法让它工作。

我的水平导航栏中的列表元素似乎出现了不同的高度和宽度。我已经仔细检查了我的百分比值和其他粗心错误，但我不知道为什么会发生这种情况。我甚至研究过以前关于水平导航条的问题，我找不到答案。但如果我错过了，请告诉我。

这是我的jsfiddle的链接 http://jsfiddle.net/shihfa/8tsy0ms7/

<body>
<div class="contentwrapper">
    <!-- beginning of header element -->
    <div class="gradientheaderfooter">
        <header class="banner" role="banner">
             <h1>Good Karma Bikes</h1>

        </header>
    </div>
    <!-- end of header element -->
    <div class="navbar">
        <ul class="navbarbuttons">
            <li><a href="https://www.google.com">Need a Bike?</a>
            </li>
            <li><a href="https://www.google.com">Get Involved</a>
            </li>
            <li><a href="https://www.google.com">About Us</a>
            </li>
            <li><a href="https://www.google.com">Our Impact</a>
            </li>
            <li><a href="https://www.google.com">What's New</a>
            </li>
            <li><a href="https://www.google.com">Donate Now</a>
            </li>
        </ul>
    </div>
    <!-- beginning of main element -->
    <main class="main" role="main">
        <img src="images/GKBArt_Home1.jpg" alt="Good Karma Bikes Volunteers repairing bicycles at   
InnVision.">
    </main>
    <!-- end of main element -->
    <!-- beginning of aside element -->
    <aside class="sidebar" role="complementary">
        <ul class="sidebarbutton">
            <li><a href="https://www.google.com">Donate</a>
            </li>
            <li><a href="https://www.google.com">Volunteer</a>
            </li>
            <li><a href="https://www.google.com">Shop</a>
            </li>
        </ul>
    </aside>
    <!-- end of header element -->
</div>

这是适用于水平导航栏的CSS片段：

/* === Global Settings === */
@media screen {
header, main, aside, footer {
    display: block;
}
/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,  
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,   
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, 
mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol {
    padding-left: 1.4em;
    list-style: decimal;
}
ul {
    padding-left: 1.4em;
    list-style: square;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* end reset browser styles */
/* === Layout For Page === */
body {
    background-image: url(../images/GKBBackground_Gradient1.png);
    background-repeat: repeat-x;
}
.contentwrapper {
    max-width: 1366px;
    margin: 0 auto;
    outline: 1px solid #333333;
}
.gradientheaderfooter {
    background-image: linear-gradient(to bottom, silver, green 90%);
}
.banner {
    border-bottom: 1px solid #000000;
}
.banner h1 {
    font-size: 6em;
    text-align: center;
}
/* === Code for NavBar Buttons Begin === */
.navbarbuttons ul {
    margin: 0;
    padding: 0;
}
.navbarbuttons li {
    list-style-type: none;
    float: right;
    margin: 0 0 0 2%;
}
.navbarbuttons a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #FFFFFF;
    background-color: green;
    text-align: center;
    padding: 10%;
    line-height: 100%;
    text-decoration: none;
    text-transform: uppercase;
}
.navbarbuttons a:hover, a:active {
    background-color: #7A991A;
}
/* === Code for NavBar Buttons Buttons End === */

Answer 1

.navbarbuttons a:link, a:visited {
    ...
    padding: 10%; // your culprit
    ....
}

设置填充的百分比将等于每个块的宽度的百分比。由于每个块的宽度不同，10％将始终是不同的量。改为设定固定金额：

padding: 10px;

或

padding: 0.8em;

水平导航栏中的不均匀列表元素。列表元素是不同的高度

1 个答案: