Question

使用此fiddle示例，如何在添加更多div时动态调整正文水平滚动？

所以div不会跳线并保持在同一条线上。

我宁愿不使用white-space: nowrap，但如果可能的话动态调整身体。

Answer 1

你需要那个白空间规则。类似于：http://jsfiddle.net/8QjM7/12/

.container {
    white-space:nowrap;
}

唯一的另一种方法是将它们放入容器中，并使用JS计算项目数量乘以其宽度，然后在容器上设置该宽度。然后容器将离开屏幕，但内部的物品不会包裹。

Answer 2

只需加上所有.columns宽度

  var totalWidth = 0;
  $.each($('.column'), function(){
     totalWidth += $(this).width();
  });
  $('.divs').width(totalWidth);

http://jsfiddle.net/8QjM7/8/

Answer 3

您可以将“列”div包装在另一个div中。 Fiddle

使用jQuery动态更新div的宽度。

var width = $("div.scrollable").width() + 50;
 $("div.scrollable").width(width);

Answer 4

第一

将所有a包裹在<div class="column">

中

然后

将white-space:nowrap;添加到.column

.column {
      display:inline-block;
      height: 50px;
      background-color: #000;
      width: 50px;
      white-space:nowrap; /*added*/
  }
  a {
      display:inline-block; /*added*/
  }

working demo

添加内容时调整水平宽度

4 个答案: