使内联块元素保持在同一行

Question

我有一个简单的网站：

• 我定义了两个小类：row和column.
• 我有一行两列的 HTML。

我想强制确保列出现在同一行上，即使它超出了屏幕的边界。

下面是页面缩小很多时的样子（很明显，它们不像我希望的那样在同一条水平线上）：

这是一个用于重现/玩弄代码的 Codepen：

https://codepen.io/maxpleaner/pen/KmXbRX

这是 HTML 标记（使用 .slim 预处理器）：

#examples
  #example-1.row
    iframe.column{
      src='http://localhost:3000'
    }
    .explanation.column on the left is an iframe

这是样式（使用 .sass 预处理器）

  body, html
    width: 100%
    height: 100%
    overflow-x: scroll

  @mixin cell-height
    height: 300px

  @mixin cell-width
    width: 300px

  @mixin inline-block
    display: inline-block

  @mixin nowrap
    whitespace: nowrap

  @mixin default-spacing
    padding: 10px
    margin: 10px

  .row
    display: block

  .column
    border: 1px solid black
    @include cell-width
    @include cell-height
    @include inline-block
    @include nowrap
    @include default-spacing

我要指出，我尝试添加float: left的.column风格。当页面缩小时它看起来是正确的，但在移动设备上它仍然出现在两行上。如果页面不合适，我希望它水平拉伸页面（因此用户必须向左/向右滚动）。

Answer 1

您可以display: inline-block / inline使用white-space: nowrap容器 ( demo )强制项目保持在同一行：

.row
  display: block
  white-space: nowrap

或者使用@include nowrap您拥有的mixin。

此外，正如克里斯的回答中所建议的，您应该使用以下方法将两个元素对齐到顶部：

.explanation.column
  vertical-align: top