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

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>

这就是它现在的样子：

请注意，每个导航项的宽度都应与其内容相关。我设法使用静态宽度值（幻数）来构建它，如下面的 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？你能给我一个提示吗？ 已解决！！！
2. 我想让这个响应。计算宽度的百分比是最佳做法吗？然后将它们放入媒体查询中？或者甚至可以使 li 元素与其内容相关（例如 display:inline; 通常应该做什么）？

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

---

编辑：

根据要求，这是我现在的状态（感谢冷冻豌豆的罗迪）：

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

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

Answer 1

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

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

负右边距为a trick，以克服内联块元素之间的原生间隙。

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

这是此代码的working JSFiddle demo。我在<a> 中添加了灰色的:hover 背景色，以便您查看效果。

Answer 2

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

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

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

会做的。

Answer 3

#2

我所做的是将 UL 中的 LI 设置为 display:block 当屏幕宽度开始影响菜单的外观和感觉时。

例如：

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

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

Answer 4

部分答案：

1. 增加可点击区域

   nav#main-navigation ul li a { 显示：块； 文字装饰：无； 填充：10px，20px； }

将标签的显示属性设置为“block”使链接扩展以填充它的容器。填充会增加可点击区域的大小，因此请根据需要调整值。

Answer 5

1.我在这里并不完全理解你（<li> 不能是 <a> 元素）但我认为你想要的是 <li> 的样式与标签相同.有几种方法可以做到这一点，例如将<li>s 的:hover 状态设置为与<a> 相同。将指针设置为光标可能是一个好的开始。

2.如果你想让你的设计适应视口的宽度，你不一定需要使用@media。 @media 用于在您的设计中设置断点，其中元素可以在这些点之上和之下重排，其余部分可以完成。我只是在这里使用了液体设计：http://jsfiddle.net/ucbEe/ 我删除了所有固定宽度并在 li 上放置了 20% 的宽度（5/100=20% 宽度）。

这足够有意义吗？