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

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

我已经建立了一个导航栏，看起来很不错：

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

对此，我有两个问题：

是否可以用链接标签填充整个li标签？你能告诉我怎么做吗已解决

我想让这个反应灵敏。计算宽度百分比是最佳实践吗？然后把它们放到媒体查询中？或者甚至可以使li元素与其内容相关（比如display:inline；通常应该做什么）

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

---

编辑： 应要求，这是我现在的状态（感谢冷冻豌豆的Roddy）：

---

我想使其响应速度更快，以便在比960px（我的最大值）更小的显示器上显示。我希望导航栏延伸到包含它的div的整个长度。谢谢你的帮助

对于第一个问题，一种方法是通过JQuery。比如：

$("#main-navigation li").click(function () {
    window.location = $(this).find("a").attr("href");
});

$("#main-navigation a").click(function (e) {
    e.preventDefault();
});

---

可以。对于第一个问题，一种方法是通过JQuery。比如：

$("#main-navigation li").click(function () {
    window.location = $(this).find("a").attr("href");
});

$("#main-navigation a").click(function (e) {
    e.preventDefault();
});

我会的。

#2

我所做的是将UL中的LI设置为当屏幕宽度开始影响菜单的外观时显示：阻塞

例如：

@media only screen and (min-width:0px) and (max-width:960px)
{
    nav#main-navigation li { display:block; width:100%; }
}

最后的效果应该是菜单项的垂直列表。大多数时候，我会将菜单项的外观更改为按钮。

\2

我所做的是将UL中的LI设置为当屏幕宽度开始影响菜单的外观时显示：阻塞

例如：

@media only screen and (min-width:0px) and (max-width:960px)
{
    nav#main-navigation li { display:block; width:100%; }
}

最后的效果应该是菜单项的垂直列表。大多数情况下，我会将菜单项的外观更改为按钮。

部分答案：

要使可点击区域更大，请添加

导航#主导航ul li a { 显示：块； 文字装饰：无； 填充：10px，20px； }

将标记的显示属性设置为“block”会使链接扩展以填充其容器。填充会增加可单击区域的大小，因此请调整值以满足您的需要。

部分答案：

要使可点击区域更大，请添加

导航#主导航ul li a { 显示：块； 文字装饰：无； 填充：10px，20px； }

---

将标记的显示属性设置为“block”会使链接扩展以填充其容器。填充会增加可单击区域的大小，因此请调整值以满足您的需要。

1.我不完全理解您的意思（

无法
我删除了所有固定宽度，并在li上放置了20%的宽度（5/100=20%宽度）

这有意义吗？
1.我不完全理解你的意思（
不能
我删除了所有固定宽度，并在li上放置了20%的宽度（5/100=20%宽度）

这有足够的意义吗？
第二个问题的答案是使
元素显示
内联块
，并移除浮动。这样，菜单项将响应
内联
项等内容大小

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

负右边距用于克服内联块元素之间的本机间隙

要使可点击区域更大，解决方案是这样的。基本上，您需要做的是将
显示：阻止
放在
LIA
元素上，并告诉它占据所有可用空间。但是，这意味着将li的填充转移到
a

这是这段代码的一部分。我在
中添加了一个灰色的
：悬停
背景色，这样你就可以看到效果了。
第二个问题的答案是让你的
元素显示
内联块
并删除浮动。这样，菜单项将响应像
内联
这样的内容大小女士

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

负右边距用于克服内联块元素之间的本机间隙

要使可点击区域更大，解决方案是这样的。基本上，您需要做的是将
显示：阻止
放在
LIA
元素上，并告诉它占据所有可用空间。但是，这意味着将li的填充转移到
a

这是这段代码的一部分。我在
中添加了一个灰色的
：悬停
背景色，这样你就可以看到效果。
为什么列表项不能包含链接？呃..我没有这么说。我说的是它们不能是元素（链接）。换句话说，元素执行的功能与
不同。你是对的。我实际上是想将链接扩展到包含它的li标记的整个大小。显示：如@Roddy所说，在
中的上块。还有，你看到我的JS提琴了吗？为什么列表项不能包含链接？呃..我没有唉，我说它们不能是元素（链接）。换句话说，元素执行的功能与
不同。你是对的。我实际上是指将链接扩展到包含它的li标记的整个大小。display:block在
中的上，正如@Roddy所说。还有，你看到我的JS fiddle回答你的响应性设计问题了吗？包含可查看版本的你在做什么。我建议使用-你会在下面的答案中看到它的使用。你只需将你的html粘贴到html框中，将CSS粘贴到该框中，然后按run。一张图片可以说出1000个单词。谢谢你的提示。我在那里注册了（非常好的网站btw.）并编辑了我的问题。包含您正在处理的内容的可视版本可能会很有帮助。我建议使用-您将在下面的答案中看到它的使用。您只需将html粘贴到html框中，将CSS粘贴到该框中，然后按run。一张图片可以说出1000个单词。感谢您的提示。我注册了t