第六十五章 导航

选用哪种方法横排,要看我们需要它的什么特点。

我们先用 float 横排试试看:

nav>ul li {list-style: none;float: left;}
当前效果

成功横排,但是,它们排列的太紧密,没空隙,不舒服。

从视觉上,我们用内补和外补都可以,给哪个元素设置似乎也都可以达到效果。但是我们希望每一个导航项作为一个按钮存在,无论点击它的文字,还是点击它的空白,都可以有所反应。其实就是链接元素的范围充满了导航项的内部。

那我们就应该扩充链接的范围,所以给 a 元素添加内补。但是 a 是行内元素,所以一定要先记得给它设置为块元素!

nav>ul li>a {display: block;color: #333366;text-decoration: none;padding: 10px;}

想一想为什么,尝试把内补添加给 li 元素,看看链接的响应范围是怎样的,并通过检查元素进行观察。

现在的效果可以说是比较令人满意了:

当前效果

那么居中呢?这就略尴尬了,我们希望的是整体居中,可以视为 ul 元素整体居中,但在我们所学的范围内,需要它具有一个确定的宽度。可是如果我们考虑到导航内部项目数量未必固定,文字可能更改等等因素,这个宽度并不好确定。

那就还是前面的方法吧,把 ul 设置为 inline-block 如何?

nav {text-align: center;}nav>ul {display: inline-block;}

果然可以,只是似乎……有点歪。

当前效果

通过检查元素发现,ul 默认在左侧有一个内补。这是为了容纳列表项前面的符号(比如圆点、序号)而存在的,而现在我们并不需要它,所以去掉去掉。以及上下方向的外补一起去掉。

nav>ul {display: inline-block;padding: 0;margin: 0;}
当前效果

然后我们忘记了什么?清除浮动。但是在检查元素的时候并没发现问题是为什么?因为 ul 是 inline-blockinline 是个高个子,看到了飘在上面的浮动元素。不过还是清除一下浮动比较省心,养成习惯,免得忘了产生莫名其妙的问题。

所以最后加一个空白的 li 元素,用来清除浮动。想想我们在这个页面里需要清除浮动的地方还有很多,分别设置好麻烦,所以定义一个 class 好了:

<!-- 上面省略了 --><li class="clear"></li></ul>
.clear {display: block;float: none;clear: both;}

一般来说,只要有 clear: both; 就可以清除浮动,但是,我们可能把这个 class 加在各种元素上(如果你非要都用 div 来清除浮动,确实问题会少。但是在 ul 里面放一个 div 去和 li 元素并列就很奇怪),而这些元素可能本身有着各种样式,比如现在的 li 元素就具有,浮动,所以上面两个属性就是为了应对这种情况而写的。

导航想要加一个背景,希望是完整的背景的话,那就加给 nav 元素吧,毕竟只有它的宽度是通栏的。然后你会发现文字有点偏上,检查之后 ul 的高度和 nav 的高度不一样。明明没有其他东西,高度不一样……

这又是 inline-block 元素搞的鬼,行内元素涉及到一个对齐问题,有兴趣的话大家可以搜索一下,我就不多讲解了,目前加上一个 vertical-align: top; 就可以解决,这个属性说的是垂直方向上的对齐方式。

强调一下,目前我们用的是比较传统的排版方法,确实不好用,不容易。但是它能做到大部分的效果,而且现在应用也很广泛,虽然我们后面会讲现代的排版方法,但是依旧强烈建议也要掌握过去的方法。

这时候一切就都如愿了。那么我们可不可以用 inline-block 方法实现横排做到现在的效果呢?当然也是可以的,这个就作为作业留给大家哦~

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第六十五章 导航

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏