内联块及其相关类，无需依赖浮动或弹性。

大家好，
我是Mandai，Wild团队负责开发工作的成员。

最近几年，我第一次连续不断地编写 HTML 代码，我注意到浏览器对 CSS3 的支持有了显著提升，这让网页制作变得更加容易。
开发环境也发生了变化；现在可以使用 SASS 或 LESS 进行编程，并且可以使用 gulp、grunt 和 webpack 等工具实现编译自动化。

即使开发环境发生变化，使用 CSS 创建响应式网站的技巧仍然相同，因此这次我将总结使用 inline-block 构建响应式水平项目的技巧。

浮球的缺点

以前，人们通常会使用 `float: left` 来水平排列列表中的项目。
然而，使用 `float` 水平排列项目有一个缺点：当项目水平排列时，父级项目的高度会变为 0。

<style> .hoge-list1 { float: left; background-color: blue; color: white; margin-left: 10px; } </style><ul style="list-style: none; background-color: pink;"><li style="margin: 0;" class="hoge-list1">霍格</li><li style="margin: 0;" class="hoge-list1">霍格</li><li style="margin: 0;" class="hoge-list1">霍格</li><li style="margin: 0;" class="hoge-list1">霍格</li><li style="margin: 0;" class="hoge-list1">霍格</li><li style="margin: 0;" class="hoge-list1">霍格</li></ul>

我已将紧随其后的 div 元素的 margin-top 设置为 10px，但这并没有正常工作，我无法获得所需的间距。

大约 10 年前，为了避免这种情况，人们会添加各种不必要的标签或尝试使用 CSS 来做事情。

还有 display:flex

现在是 2016 年。W3C 对此进行了深入研究，并在最新的规范中引入了一个名为 display:flex 的属性。
这个属性非常实用；它的设计充分考虑了响应式设计，因此，如果根据屏幕尺寸改变水平显示的元素数量，它会自动调整宽度以适应屏幕。甚至有人说，有了它，Bootstrap 的 GRID 系统将不再必要。

然而，2016 年 IE 出现了一个问题，该属性在 IE11 中仅得到有限支持，并且在 IE10 之前的浏览器中无效。

因此，我们可能还需要一段时间才能充分利用 flex 属性，例如 inline-flex，而不仅仅是 display:flex。

什么是行内块？

这时就需要用到 inline-block 属性了。

该属性自 IE8 起就已支持，并且从 CSS2 时代就已存在，因此可以说它是一个成熟可靠的属性。
所以，我们将使用它来并排排列元素。

如果我们使用行内块重写前面的例子，它将如下所示：

<style> .hoge-list2 { display: inline-block; background-color: blue; color: white; margin-left: 10px; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink;"><li style="margin: 0;" class="hoge-list2">霍格</li><li style="margin: 0;" class="hoge-list2">霍格</li><li style="margin: 0;" class="hoge-list2">霍格</li><li style="margin: 0;" class="hoge-list2">霍格</li><li style="margin: 0;" class="hoge-list2">霍格</li><li style="margin: 0;" class="hoge-list2">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

这样做，之前不可见的 ul 元素的高度就被设置好了，粉红色的背景颜色也显示出来了。

如果想要两列并排显示，请移除边距并将宽度设置为 50%，即可创建所需的布局。

<style> .hoge-list3 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0;"><li style="margin: 0;" class="hoge-list3">霍格</li><li style="margin: 0;" class="hoge-list3">霍格</li><li style="margin: 0;" class="hoge-list3">霍格</li><li style="margin: 0;" class="hoge-list3">霍格</li><li style="margin: 0;" class="hoge-list3">霍格</li><li style="margin: 0;" class="hoge-list3">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

哦，即使我把宽度减少到 50%（一半），它们仍然无法并排显示……
为了解决这个问题，我现在将引入一个可以与 inline-block 结合使用的 CSS 属性。

inline-block 的配套程序

事实上，有些模式你并不需要使用，所以这里举几个例子。

<style> .hoge-list4 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0;"><li style="margin: 0;" class="hoge-list4">霍格</li><li style="margin: 0;" class="hoge-list4">霍格</li><li style="margin: 0;" class="hoge-list4">霍格</li><li style="margin: 0;" class="hoge-list4">霍格</li><li style="margin: 0;" class="hoge-list4">霍格</li><li style="margin: 0;" class="hoge-list4">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

*在 WordPress 中，每个 HTML 标签都会自动插入换行符，因此请复制示例 HTML 并在其他环境中尝试。

问题在于 `<li>` 元素后面的换行符、空格和制表符占用了少量空间，导致它们无法完美地适应 50% 的宽度。为了避免这种情况
，

• 与之前的代码一样，删除 li 元素后面的控制字符以及用于 HTML 格式的任何制表符或空格。
• li 元素的父元素（即 ul 元素）会暂时限制字符的宽度。

有两种方法可以做到这一点：

第一种方法是 HTML 编写方式的问题，所以我们将研究如何处理第二种方法。

父元素上设置了控制字符宽度的 CSS 属性 `letter-spacing`。
然后，子元素上的 `letter-spacing` 属性被重置。
下面的示例演示了这一行为。

<style> .hoge-list5 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list5">霍格</li><li style="margin: 0;" class="hoge-list5">霍格</li><li style="margin: 0;" class="hoge-list5">霍格</li><li style="margin: 0;" class="hoge-list5">霍格</li><li style="margin: 0;" class="hoge-list5">霍格</li><li style="margin: 0;" class="hoge-list5">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

我给父元素添加了“letter-spacing: -0.4em;”，给子元素添加了“letter-spacing: normal;”。

-0.4em 这个值的含义尚不清楚，但任何小于 -0.4em 的值都能得到你想要的布局。

另一位同伴

还有一项属性需要设置，所以我在这里介绍一下。

之前，内容是单行列表，所以没有发现问题，但如果是像下面这样的列表，布局就会被打乱。

<style> .hoge-list6 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list6">豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格</li><li style="margin: 0;" class="hoge-list6">霍格</li><li style="margin: 0;" class="hoge-list6">霍格</li><li style="margin: 0;" class="hoge-list6">霍格</li><li style="margin: 0;" class="hoge-list6">霍格</li><li style="margin: 0;" class="hoge-list6">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

可能不太容易看出来，但当第一个列表是多行时，它旁边的第二个列表会以第一个列表的底部为基准对齐，因此第二个列表上方会留出一块空白区域。这个空白区域就是 ul 元素粉色背景显示的地方。

通常情况下，布局是从顶部对齐的，所以我们需要设置 `vertical-align` 来调整它。
以下示例展示了设置此属性后的结果。

<style> .hoge-list7 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; vertical-align: top; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list7">豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格豪格</li><li style="margin: 0;" class="hoge-list7">霍格</li><li style="margin: 0;" class="hoge-list7">霍格</li><li style="margin: 0;" class="hoge-list7">霍格</li><li style="margin: 0;" class="hoge-list7">霍格</li><li style="margin: 0;" class="hoge-list7">霍格</li></ul><div style="clear: both; margin-top: 10px;">测试</div></div>

现在我们得到了一个顶部整齐对齐的列表。

@media 提供响应式支持，可根据设备宽度调整宽度。

如果你理解了这些概念，布局方面应该不会遇到太多问题。
这次我编写代码时，成功地运用上述技巧规范了 HTML，而且比我预想的要省力得多。

CSS 既深奥又有趣。

对于最终版本既非 CSS3 也非 HTML5，我们深表歉意。

就这样。