javascript - 如何在一行中强制显示div内的所有固定宽度元素

Question

我在一个 div 中有固定宽度的元素，我需要强制所有元素显示在一行上，水平滚动条到“网格内容”。我尝试了很多东西但卡住了。这是 fiddle - https://jsfiddle.net/29pobkzf/

这是我的 CSS 和 HTML

 .grid-container {
      width: 100%;  
      margin-top: 20px;
      overflow: auto;
    }
    
    .grid-content {
      width: 100%;
      height: 400px;
      float: left;
    }
    .grid-content .grid-row {
      width: 100%;
      overflow-x:scroll;
      border-right: 1px solid #ccc;
    }
    .grid-content .grid-row .grid-column {
      border: 1px solid #cccccc;
       display: inline-block;
      border-top: 0;
      border-right: 0;
      padding: 10px;
      height: 60px;
      width: 400px;
    }

 <div class='grid-container'>
        <div class="grid-content">
                <div class='grid-row'>
                        <div class='grid-column'>a1</div>
                        <div class='grid-column'>a2</div>
                        <div class='grid-column'>a3</div>
                        <div class='grid-column'>a4</div>
                 </div>
        
        </div>
    </div>



   

我的意图是让 grid-content 有一个滚动条，它的所有内容占据一行/水平对齐。我面临的问题是像 a3 和 a4 这样的元素被渲染到 a1 和 a2 下面。

Answer 1

这是因为 .grid-column 设置为 display: inline-block; 并且默认换行。可以通过以下方式更改此行为:

• 将 white-space: nowrap; 添加到 .grid-content .grid-row

您可能还想删除 .grid-column 元素之间的空白，方法是将它们写在 HTML 的一行中(如下例所示)或在它们之间放置注释.这将阻止空白在生成的 HTML 中的每个 .grid-column 元素之间添加间隙。

.grid-container {
  margin-top: 20px;
  width: 100%;
}
.grid-content {
  float: left;
  height: 400px;
  width: 100%;
}
.grid-content .grid-row {
  border-right: 1px solid #ccc;
  overflow-x: scroll;
  width: 100%;
  white-space: nowrap;
}
.grid-content .grid-row .grid-column {
  border: 1px solid #cccccc;
  border-right: 0;
  border-top: 0;
  display: inline-block;
  height: 60px;
  padding: 10px;
  width: 400px;
}

<div class='grid-container'>
  <div class="grid-content">
    <div class='grid-row'>
      <div class='grid-column'>a1</div><div class='grid-column'>a2</div><div class='grid-column'>a3</div><div class='grid-column'>a4</div>
    </div>
  </div>
</div>