Inline-block 及其不依赖于 float 或 flex 的同伴

你好。
我是Mandai，负责Wild 开发团队。

最近，我几年来第一次进行了大量的 HTML 编码，现在浏览器对 CSS3 的支持已经取得了进展，创建页面变得更加容易。
开发环境也发生了变化，SASS 和 LESS 使得可编程组织成为可能，并使用 gulp、grunt 和 webpack 进行自动化编译。

即使开发环境发生变化，用 CSS 创建响应式网站的技巧仍然是一样的，所以这次我将总结一下使用 inline-block 构建响应式水平项的技术。

浮动的缺点

很久以前，曾经有一段时间，设置 float: left 来水平排列列表是很常见的。
但是，如果使用浮动将它们水平排列，它们将水平排列，但父项的高度将为 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 来避免这个问题。

还有显示：flex

时间是2016年。 W3C 还花了很多心思在最新规范中创建一个名为 display:flex 的属性。
这是另一个方便的功能，因为它被设计为响应式的，所以如果你根据屏幕尺寸改变水平排列的项目数量，它会自动适应宽度，所以据说不需要 bootstrap 的 GRID 系统马苏。

但2016年IE出现了问题，IE11仅支持功能有限，并且该属性在IE10之前的浏览器中无效。

因此，看起来我们还需要一段时间才能不仅使用display:flex，还可以使用像inline-flex这样的flex属性。

什么是内联块？

这就是一个名为 inline-block 的属性发挥作用的地方。

这是一个从 IE8 就开始支持、CSS2 时代就存在的属性，所以我认为如果你明白它已经过时了就没有问题。
所以，这次我想用这个并将它们水平排列。

如果我们使用 inline-block 重写前面的示例，它将如下所示：

<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 属性。

内联块的伴侣

事实上，有些模式您不需要使用，所以我将向您展示一个示例。

<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的编写方式有问题，那么我们看看第二种方法如何处理。

在父元素上设置 letter-spacing，这是一个控制字符宽度的 CSS 属性。
然后恢复子元素上的字母间距。
下面的示例添加了此行为。

<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。

就是这样。