Question

我在div中有固定的宽度元素，我需要强制所有元素显示在一条线上，水平滚动条到网格内容＆＃39;。我尝试过很多东西但是卡住了。这是小提琴 - https://jsfiddle.net/29pobkzf/

这是我的CSS和HTML

＆＃13;

 .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;
    }

＆＃13;

 <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>

＆＃13;

我的意图是网格内容有一个滚动条，其所有内容占据一行/水平对齐。我面临的问题是像a3和a4这样的元素会在a1和a2下面呈现。

Answer 1

这是因为.grid-column设置为display: inline-block;，默认情况下会换行到新行。可以通过以下方式更改此行为：

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

您可能还希望删除.grid-column元素之间的空白区域，方法是将它们写在HTML格式的一行中（如下例所示），或者在它们之间添加注释。这将阻止空格在结果HTML中的每个.grid-column元素之间添加间隙。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在white-space: nowrap课程中使用.grid-content .grid-row，以便它可以抑制换行符并从float: left中移除.grid-content

Read more about 'white-space' css property

可以使用以下内容替换整个CSS：

.grid-container {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
}

.grid-content {
  height: 400px;
  width: 100%;
}

.grid-content .grid-row {
  border-right: 1px solid #ccc;
  overflow-x: scroll;
  white-space: nowrap;
}

.grid-content .grid-row .grid-column {
  border: 1px solid #cccccc;
  border-top: 0;
  border-right: 0;
  padding: 10px;
  height: 60px;
  width: 400px;
  display: inline-block;
}

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

2 个答案: