Question

我已经设置了以下CSS。除了一件事，一切看起来都很好。当我滚动导航中的链接时，整个“按钮”用背景颜色填充，而当我翻转页脚中的链接时，只填充文本后面的链接。如何解决这个问题，以便在页脚中填充整个“按钮”，最好不要求助于类和图像（意思是尽可能地利用HTML5 / CSS3）？

我通过多个网络浏览器看过这个。我猜这是因为列表项内联显示，但我不知道解决方案。

--- CSS ---

@CHARSET "UTF-8";

* {
margin: 0;
padding: 0;
}

html * {
    margin: 0;
    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */

body {
    background: #fff;
    color: #333;
    font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
    font-size: 62.5%;
    margin: 0 auto;
    width: 960px;
}

header {
    background-color: #999;
    border: 1px solid #999;
    border-radius: 25px;
    margin-top: .5em;
}

header h1 {
    color: #fff;
    font-weight: bold;
    font-size: 2.4em;
    margin: .8em 0 .3em 0;
    text-align: center;
}

nav {
    margin: 1em 30em;
    padding: .8em 1.2em;
}

nav ul {
    padding-left: 1.5em;
    list-style: none;
}
nav ul li {
}
nav ul a {
    display: block;
    text-decoration: none;
}
nav ul li a {
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 25px;
    color: #222;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
}
nav ul a:hover {
    color: #333;
    background: #ccc;
}

nav#baseball {
    display: none;
}
nav#football {
    display: none;
}

footer {
    border-top: 1px solid #ccc;
    margin-top: .5em;
    margin-bottom: 1em;
    padding: .8em 1.2em;
}

footer ul {
    list-style: none;
    text-align: center;
}

footer ul li { 
    border: 1px solid #999;
    border-radius: 25px;
    display: inline; 
    margin: 0.0em 1.0em 0.0em 1.0em;
    padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/*    display: block; */
    text-decoration: none;
}
footer ul li a {
    color: #222;
}
footer ul a:hover {
    color: #333;
    background: #ccc;
}

--- HTML ---

<header>
    <h1>Sports Fan</h1>
</header>

<nav id='sports'>
    <ul>
        <li><a href="about-temp.html">Baseball</a>
        </li>
        <li><a href="blog-temp.html">Basketball</a>
        </li>
        <li><a href="consulting-clinic-temp.html">Football</a>
        </li>
        <li><a href="contact.html">Hockey</a>
        </li>
        <li><a href="contact.html">Soccer</a>
        </li>
    </ul>
</nav>

<nav id='baseball'>
    <ul>
        <li><a href="homerun.html">Homerun</a>
        </li>
        <li><a href="bighit.html">Big Hit</a>
        </li>
        <li><a href="doubleplay.html">Double Play</a>
        </li>
        <li><a href="doubleplay.html">Bad Call</a>
        </li>
    </ul>
</nav>

<nav id='football'>
    <ul>
        <li><a href="about-temp.html">Touchdown</a>
        </li>
        <li><a href="blog-temp.html">Big Play</a>
        </li>
        <li><a href="consulting-clinic-temp.html">Sack</a>
        </li>
        <li><a href="contact.html">Interception</a>
        </li>
        <li><a href="contact.html">Bad Call</a>
        </li>
    </ul>
</nav>

<footer>
    <ul>
        <li><a href="choose.html">Choose</a>
        </li>
        <li><a href="manage.html">Manage</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
    </ul>
</footer>

Answer 1

在jsFiddle

中放置了更新的代码

CSS更改：

footer li{ display:inline }

footer ul a{ 
    border: 1px solid #999;
    border-radius: 25px;
    display: inline-block; 
    margin: 0.0em 1.0em 0.0em 1.0em;
    padding: 0em 1.5em 0 1.5em;
    text-decoration: none;
    color: #222;
}

背景颜色不填充风格水平列表项

1 个答案: