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>

这就是它现在的样子：

enter image description here

请注意，每个导航项的宽度应相对于其内容。我设法使用静态宽度值（幻数）构建它，如下面的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;}

我有两个问题：

是否可以使用链接标签填充整个li-tag？你能给我一个如何做到这一点的提示吗？的解决!!!
我想让这个响应。计算宽度的百分比是最佳做法吗？然后将它们放入媒体查询？或者甚至可以使li元素与其内容相关（如显示：内联;通常应该这样做）？

如果有经验的人有帮助会非常好:-) 干杯

编辑：

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

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

我想让这个响应式显示在比960px更小的显示器上（这是我的最大值）。我希望导航栏伸展到包含它的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。我在:hover添加了灰色<a>背景色，以便您可以看到效果。

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以显示：当屏幕宽度开始阻止菜单的外观时阻止。

例如：

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

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

Answer 4

部分答案：

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

nav #main-navigation ul li a { 显示：块; text-decoration：none; 填充：10px，20px; }

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

Answer 5

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

2.如果您希望您的设计适应veiwport的宽度，则不一定需要使用@media。 @media用于在您的设计中设置断点，其中元素可以在这些点的上方和下方回流，其余的百分比可以完成。我刚刚在这里使用了液体设计：http://jsfiddle.net/ucbEe/我移除了所有固定宽度并在li上放置了20％的宽度（5/100 = 20％宽度）。

这有足够的意义吗？

响应式导航栏，全链接

编辑：

5 个答案: