Question

我正在尝试在javascript中创建大量DIVS，并且我不希望页面被包装。当我在CSS上设置nowrap时，没有水平滚动。任何人都可以帮助我吗？我的JSFiddle：http://jsfiddle.net/UY4K3/1/

JS：

var table_size=50;

for(var i=0;i<table_size;i++){
    $('#table').append("<div class='inline' id='"+i+"'>"+i+"</div>");
}

CSS：

.table {
    height: 20px;
    position: fixed;
    left: 20px;
    outline: black solid none;
    white-space:nowrap;
    width: 100%;
}
.inline {
    display:inline-block;
    width:18px;
    height:18px;
    border:1px solid;
    text-align:center;
}

HTML：

<div id= "table" class="table"> </div>

Answer 1

试试this fiddle。基本上，你只需添加：

.table
{
    overflow-y: scroll;
    height: auto;
}

overflow-y: scroll强制.table div一直添加滚动条。您还可以将其设置为auto，如果表格没有完全填充其父级（或屏幕）的宽度，则会导致滚动条消失。

修改

试试this new fiddle。

只需将position: fixed更改为position: relative，然后将left: 20px更改为margin-left: 12px。

Answer 2

position: fixed是导致此问题的原因。如果您的表不需要修复，那么您可以删除该CSS规则，它将起作用。

http://jsfiddle.net/UY4K3/4/

您也可以使用 position:absolute ，这样就可以了。

http://jsfiddle.net/UY4K3/10/

如果您想使用浏览器滚动，而不是在桌面上放置滚动条，那么我认为这些是您唯一的选项，其中固定定位元素溢出身体。

Here's your more complicated fiddle所有position:fixed都更改为position:absolute。

Answer 3

white-space: nowrap的要点是禁止换行符，因此如果您希望滚动表格，则需要在overflow-x: scroll规则中添加.table。

Fiddle

如果您希望正文滚动，请尝试.table

的这些规则

.table {
    height: 20px;
    left: 20px;
    outline: black solid none;
    white-space: nowrap;
    position: relative;
}

Fiddle

在DIV上设置nowrap时没有水平页面滚动

3 个答案: