Html 背景色不填充样式化的水平列表项

我已经设置了以下CSS。除了一件事，一切看起来都很好。当我在导航中滚动链接时，整个“按钮”将填充背景色，而当我滚动页脚中的链接时，仅填充文本后面的部分。我如何解决这个问题，使整个“按钮”填充在页脚中，最好不使用类和图像（这意味着，尽可能利用HTML5/CSS3）

我已经通过多种网络浏览器了解了这一点。我猜这是因为列表项是内联显示的，但我不知道解决方案

---CSS---

---HTML---

体育迷

将更新的代码放入

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

---

这些变化很微妙，但却达到了我所追求的效果。也感谢您对JSFIDLE的介绍。非常有趣！

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

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