设置display:inline-block后，stats与nextButton元素仍无法并排，如何解决？

我来帮你排查下问题，通常用了display:inline-block还不能并排，大概率是这几个原因，咱们一个个来解决：

1. 检查元素宽度是否超出容器 #

如果#stats和#nextButton的宽度加起来（包括padding、border）超过了父容器的宽度，它们就会自动换行。你可以：

• 给父容器设置明确的宽度，或者让它自适应；
• 调整两个子元素的宽度，比如用百分比（比如各占48%），确保总和小于等于100%（还要算上可能的margin）。

示例代码：

.parent-div {
  width: 100%;
}
#stats {
  display: inline-block;
  width: 48%;
  /* 其他样式 */
}
#nextButton {
  display: inline-block;
  width: 48%;
  /* 其他样式 */
}

2. 清除inline-block元素间的空白 #

inline-block元素之间如果有换行或空格，浏览器会把它当成空白字符，占用一定宽度，导致总宽度超标。解决方法有几种：

• 把两个元素的标签写在同一行，去掉空格：

  <div class="parent-div">
    <div id="stats">...</div><div id="nextButton">...</div>
  </div>
  

• 给父容器设置font-size: 0，然后子元素再恢复字体大小：

  .parent-div {
    font-size: 0;
  }
  #stats, #nextButton {
    font-size: 16px; /* 恢复你需要的字体大小 */
    display: inline-block;
  }
  

3. 检查元素的margin和padding #

如果两个元素有默认的margin或者你设置了较大的padding，也会让总宽度超标。可以用浏览器的开发者工具（F12）查看元素的盒模型，看看实际占用的宽度。必要时可以重置margin/padding：

#stats, #nextButton {
  margin: 0;
  padding: 0;
  display: inline-block;
}

4. 试试Flex布局替代（更简单） #

如果不想纠结inline-block的各种问题，直接用Flex布局更省心，父容器设置display:flex，子元素默认就会并排：

.parent-div {
  display: flex;
}
#stats, #nextButton {
  /* 不需要inline-block了，flex子元素默认横向排列 */
}

这种方法兼容性也很好，现在大部分浏览器都支持。

你可以根据自己的情况选一种方法试试，应该就能解决问题啦！

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