如何在1060px以上使display:inline-block元素水平对齐？

要实现页面宽度≥1060px时，.para类灰色背景元素以display:inline-block水平排列，你需要针对媒体查询场景调整父容器和子元素的样式，以下是具体修改方案：

核心问题分析 #

之前尝试未成功，大概率是两个原因：一是.para没有设置合适宽度，导致横向空间不足自动换行；二是inline-block元素间默认存在空白字符间隙，挤占了可用空间。

修改后的完整代码 #

HTML #

<div class="container">
  <div class="para">
    <p>示例内容1</p>
  </div>
  <div class="para">
    <p>示例内容2</p>
  </div>
  <div class="para">
    <p>示例内容3</p>
  </div>
</div>

CSS #

/* 默认样式，小屏时垂直排列 */
.para {
  background-color: #eee;
  padding: 1rem;
  margin: 0.5rem;
}

/* 大屏（≥1060px）时的水平排列样式 */
@media (min-width: 1060px) {
  .container {
    /* 可选：设置子元素对齐方式，左对齐则用text-align:left */
    text-align: center;
    /* 消除inline-block元素间的空白间隙 */
    font-size: 0;
  }

  .para {
    display: inline-block;
    /* 设置宽度，确保横向能容纳多个元素，可根据实际内容调整 */
    width: 30%;
    /* 恢复子元素字体大小，避免继承父容器的font-size:0 */
    font-size: 1rem;
  }
}

关键说明 #

1. 媒体查询触发：@media (min-width: 1060px)确保样式仅在页面宽度达标时生效
2. 空白间隙处理：父容器设置font-size:0可以消除inline-block元素之间的默认空白，避免因间隙导致换行；如果不需要消除间隙，可去掉这行，但要相应缩小.para的宽度以预留空间
3. 宽度设置：给.para设置百分比宽度（如30%），保证在1060px宽度下能并排显示多个元素，具体数值可根据你的内容长度和间距需求调整
4. 字体大小恢复：父容器的font-size:0会被子元素继承，所以必须在.para中重新设置font-size，否则文本会消失

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