0

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

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

我的 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 的整个长度。感谢您的帮助。

4

5 回答 5

4

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

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

负右边距是克服行内块元素之间的原生间隙的技巧。

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

这是此代码的有效 JSFiddle 演示。我添加了灰色:hover背景颜色，<a>以便您可以看到效果。

于 2012-09-04T14:53:11.463 回答
0

#2

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

例如：

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

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

于 2012-09-04T14:48:38.467 回答
0

部分答案：

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

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

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

于 2012-09-04T14:49:43.900 回答
0

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

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

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

会做的。

于 2012-09-04T14:46:06.093 回答
0

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

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

这足够有意义吗？

于 2012-09-04T14:50:39.067 回答