使用display:inline-block后DIV仍换行，如何让FORM与DIV同行？

嘿，我懂你遇到的这个小坑！你只给#buttonDescription加了display: inline-block，但别忘了<form>元素默认是块级元素——它会独占一整行，所以不管div怎么设置，都会被挤到下面去。下面给你几个靠谱的解决方案：

方案一：给两个元素都设置inline-block #

这是最直接的修复方式，把form也改成行内块元素，再调整下垂直对齐避免错位：

#curWorkForm, #buttonDescription {
  display: inline-block;
  /* 可选：让元素垂直居中对齐，避免高低不一 */
  vertical-align: middle;
  /* 可选：给元素之间加个间距，更美观 */
  margin-right: 15px;
}

方案二：用Flex布局（更推荐） #

现在现代浏览器都支持Flex布局，用它来实现同行显示更灵活，还能轻松控制对齐方式：

只需要给父容器#miningArea设置flex属性就行，里面的元素自动会在一行排列：

#miningArea {
  display: flex;
  align-items: center; /* 让两个元素垂直居中，可选 */
  gap: 1rem; /* 元素之间的间距，比margin更方便，可选 */
}

这种方法不用管子元素的默认display类型，Flex会自动处理，而且后续如果要调整布局（比如响应式换行）也更方便。

额外注意事项 #

如果设置后还是换行，可能是下面的原因：

• 两个元素的总宽度超过了父容器#miningArea的宽度，这时候可以给form设置max-width: calc(100% - 120px)（根据div的宽度调整数值），或者缩小form内部元素的宽度。
• 有没有其他CSS规则覆盖了你的设置？可以用浏览器的开发者工具检查元素的computed样式，看看display属性是不是被意外覆盖了。

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