Vue.js中iframe单行横向滚动布局问题求助

你遇到的问题根源在于float:left会让元素脱离正常文档流，而white-space:nowrap只对行内/行内块元素生效，所以浮动元素不受这个属性控制，导致无法维持单行排列。下面给你两种可行的解决方案：

方案一：使用Flexbox布局（推荐） #

Flex布局是实现横向排列滚动最简洁的方式，直接调整父元素和子元素的CSS即可：

修改后的CSS：

.simparent {
  margin: 1rem;
  padding: 2rem;
  display: flex; /* 启用flex布局 */
  gap: 20px; /* 替代margin-right，统一控制子元素间距 */
  overflow-x: auto; /* 超出宽度时显示横向滚动条 */
  overflow-y: hidden;
}
.simblock {
  /* 移除float:left属性 */
}

HTML结构可以保持原样，Flex布局会自动让子元素沿水平方向排列，超出容器宽度时自动触发横向滚动。

方案二：用inline-block替代float #

如果不想使用Flex，也可以将浮动替换为行内块元素，配合父元素的white-space:nowrap实现需求：

修改后的CSS：

.simparent {
  margin: 1rem;
  padding: 2rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.simblock {
  display: inline-block; /* 替换float:left */
  margin-right: 20px;
}

注意：如果子元素之间出现意外间隙，可以给父元素添加font-size: 0，再给子元素单独设置font-size恢复正常文本大小（如果有文本的话）。

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