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

大家好，
我是开发团队野生队的成员 Mandai。

最近，我几年来第一次重新开始编写 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的网格系统了。

然而，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%（一半），这两个元素仍然无法对齐……
为了解决这个问题，我将引入以下 CSS 属性，与 inline-block 结合使用。

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，我们深表歉意。

就这样。