CSS设置.plan类display:inline-block样式未生效问题求助

你折腾半天没效果，根本不是元素间空白的锅，是两个硬错：

• 每个.plan元素外面都单独套了一层<div>，div默认是块级元素，默认宽度撑满整行，一个div独占一行，里面的子元素就算设了inline-block，也不可能跨到其他div所在的行去。
• CSS写了语法错误：background color: lightblue; 属性名中间多了空格，正确写法是background-color。这个语法错误会让浏览器解析这条CSS规则时直接中断，连带影响同规则下其他属性的渲染表现。

1. 先改CSS的语法错误：

.plan{
    display: inline-block;
    background-color: lightblue; /* 修正原属性名的空格错误 */
    text-align: center;
    padding: 16px;
    margin: 8px;
    width: 25%;
    list-style: none;
    vertical-align: middle;
}

2. 处理冗余的嵌套div：最省事的做法是直接删掉三个.plan外面各自包裹的单独div，把三个<article class="plan">平级放在#plans容器下就行。如果你不想删这些div，那就给包裹plan的div也加上display: inline-block;样式，让这三个父div先实现横向排列。

下次提问前可以先按F12打开浏览器开发者工具做基础排查：

• 看对应元素的CSS规则有没有被划删除线，确认是样式被覆盖、还是存在语法错误导致规则失效
• 看元素计算后的display属性实际值、盒模型实际占宽
• 看父元素的布局属性
  把这些排查结果一起附上，能大幅提升定位问题的效率。

内容的提问来源于stack exchange，提问作者Keel