关于li 和a 的问题

我想让导航变成一行，为什么要把li的display设置成inline ，a的display设置成inline-block，我认为把li的display设置成inline，a的display设置成block就行了啊。。。

---

建议使用float布局。
再清除浮动。
清除浮动代码。

.clear:after{
    content: ".";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.clear{
    zoom: 1;
}

---

假想题主是li 包裹 a标签的情况哦~

因为如果如题主所说

认为把li的display设置成inline，a的display设置成block

那么其实你使用了流状元素包裹块级元素，但是实际上，流状元素并无法包裹住块级元素。。在严格模式下，是不被允许的~但是宽容模式下，不同的浏览器会有不同的表现形式，所以，建议最好使用块级包裹了详情你可以自己写一个试试看，然后用开发者工具看一下dom结构看看~

如有有不对的地方，请帮我指正谢谢。

---

W3C原文：

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements)

1. display:inline-block;使inline盒子没有包裹一个block盒子. 这种方法可以摆脱float带来的很多副作用，具体可以看一下这篇文章《拜拜了,浮动布局-基于display:inline-block的列表布局》

2. float，使其不在文档流中。

---

你明白这三者关系就清楚了
inline是行内
inline-block 是行内块
block是块

---

根据情景呗。不需要inline 的特性 就直接block