css - 具有完整链接的响应式导航栏

Question

这是我在这里的第一篇文章。如果我做错了什么，请不要犹豫告诉我。

我构建了一个看起来不错的导航栏:

我的 HTML:

<div style="width: 864px; margin: 0 auto;"> 
    <nav id="main-navigation">
        <ul>
                <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
                <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
                <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
                <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
                <li id="nav5"><a href="#">Lorem ipsum do</a></li>
        </ul>
    </nav>
</div>

这就是它现在的样子:

请注意，每个导航项的宽度应该与其内容相关。我设法用静态宽度值(魔数(Magic Number))构建它，就像在下面的 css 中一样:

body{background-color: gray;}

ul{
    margin: 0;
    padding: 0;
}

nav#main-navigation li{
    float: left;
    padding: 15px 0;
    text-align: center;
    margin: 0;
    background-color: white;
    border-right: 1px dotted #222;
    color: #222;
}

nav#main-navigation li:last-child  { border: 0; }

nav#main-navigation li a{
    font: 11px/12px sans-serif;
    text-transform: uppercase;
    text-decoration: none;

}

#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}

我有两个问题:

1. 是否有可能让整个 li-tag 都被 link-tag 填充？你能给我一个如何做的提示吗？ 已解决!!!
2. 我想让它响应。计算宽度的百分比是最佳做法吗？然后将它们放入媒体查询中？或者甚至可以使 li 元素与其内容相关(就像 display:inline; 通常应该做的那样)？

如果有更有经验的人帮忙，那就太好了:-) 干杯

---

编辑:

根据要求，这是我现在的状态(感谢冷冻豌 bean 的 Roddy):

http://jsfiddle.net/0xsven/rbz72/

我想让它响应，以便在小于 960 像素(这是我的最大值)的较小显示器上显示。我希望导航栏延伸到包含它的 div 的整个长度。感谢您的帮助。

Answer 1

第二个问题的答案是让你的<li>元素展示inline-block并移除 float 。这样菜单项将响应内容大小，如 inline元素。

nav#main-navigation li{
    display:inline-block;
    padding:15px 10px;
    margin-right: -4px;
}

负右边距是a trick克服内联 block 元素之间的原生差距。

要使可点击区域更大，解决方案是 like this .本质上你需要做的是 display: block在 li a 上元素并告诉它占用所有可用空间。这意味着将 li 的填充转移到 a , 然而。

这是一个working JSFiddle demo这段代码。我加了一个灰色:hover <a> 的背景色这样您就可以看到效果。