选用哪种方法横排，要看我们需要它的什么特点。
我们先用 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-block，inline 是个高个子，看到了飘在上面的浮动元素。不过还是清除一下浮动比较省心，养成习惯，免得忘了产生莫名其妙的问题。
所以最后加一个空白的 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 方法实现横排做到现在的效果呢？当然也是可以的，这个就作为作业留给大家哦~
暂无评论内容