2

我们正在尝试使一组列表适合具有设定宽度和高度的水平滚动容器。我们正在使用 CSS 列来尝试解决这个问题。但是，属性 'column-fill: auto' 以正确的方式显示列表项，但 'ul' 没有调整大小以适应其显示方式的变化。有什么办法可以解决这个问题，还是有另一个 CSS 解决方案？

这是问题的一个例子： 

.container {
  width: 300px;
}
.panel {
  border: 1px solid red;
  white-space: nowrap;
  overflow-x: auto;
}   
.column {
  border: 1px solid blue;
  width: auto;
  display:inline-block;   
}
.list {
  column-count: auto;
  column-width: 120px;
  column-fill: auto;
  height: 150px;
  width: auto;
}
.list-item {
  float: left;
}

.cf {
  &:before, &:after {
    content: '';
    display: table;
    width: 100%;
  }
}
<div class="container">
  <div class="panel cf">
    <div class="column cf">
      <ul class="list">
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
      </ul>
    </div>
    <div class="column cf">
      <ul class="list">
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
        <li class="list-item">This is a test</li>
      </ul>
    </div>
  </div>
</div>

4

0 回答 0