html - 如何使 80% 宽度的 div 水平滚动？

Question

我有一个座位图，可能包含 20 个或 200 个座位。我不知道宽度，所以我想将它设为 80% 宽并且可以水平滚动，无论它有多宽。

我已经尝试将其设置为:

overflow-x: auto;
white-space: nowrap;

或:

overflow-x: scroll;
overflow-y: hidden;

但两者都不起作用。

这是一个 fiddle 代码: https://jsfiddle.net/ywzb365t/

我需要水平滚动的 div 是 #seat-map。

水平调整它的大小以查看我遇到的问题。如果我不将其设置为 100% 宽且可水平滚动，它将混淆座位排。

我很确定这只是一件简单的事情，但我无法弄明白。非常感谢任何帮助。

Answer 1

你必须确保 seatCharts-row 等于内容然后 seatCharts-container 有 overflow-x:auto

我在这里写了一个小修复程序，它将改变 seatCharts-row 宽度。

将此代码放在 $(document).ready(function()

的底部

  $(".seatCharts-container").css({ overflow:"hidden",  "overflow-x" :"auto" })

  $(".seatCharts-container > .seatCharts-row").each(function(){
   var width =($(this).children().length * $(this).children().first().outerWidth(true))
   $(this).width(width)      
  })