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

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

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。