在CSS布局中，遇到两个inline元素意外换行的问题。官方解释表明，inline-block允许定义高度和宽度，使得内容按块级元素处理但保持行内展示。解决方案是将元素设置为inline-block，避免子元素与块级元素冲突导致的换行问题。通过示例代码展示了inline和inline-block的效果差异。
问题的提出
在做页面的时候，意外的发现 有两个 inline 元素排在一起，却还是换行了的问题。在一番胡乱调试后，发现把第二个元素改成 inline-block 问题就解决了。
原因解析
官方解释
官方的定义： inline-block在inline的基础上可以定义height和width。inline-block的对象会被定位inline 而内容会被定义为block。
解决方法：
在看见了这句奇奇怪怪的话后，经过一顿实验，发现：
（敲黑板）
如果你想把一个子元素包含了块级元素的元素A，正常的像行内元素一样不自动换行（可以一行多个）。
那你不能用 inline 属性放元素A身上，因为 inline 属性无法传递，他的子元素还是 block 元素，会因为冲突，或者是我长得太帅，导致无法正常不换行。
而inline-block的定义刚好适合这种情况，于是就能正常换行。
示例代码
使用inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span&
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
