Javascript 带水平div布局的右边距

我正在尝试为我的网站创建一个水平的、可滚动的布局。我的代码看起来像这样

<div id="outerWrapper">
    <div id="innerWrapper" style="position: relative;">
        <div style="width: 200px; position: absolute; top: 0px; left: 0px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 220px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 440px;">
            some lengthy content!
        </div>

        ...

        <div style="width: 200px; position: absolute; top: 0; left: 1100px;">
            some lengthy content!
        </div>
    </div>
</div>

一些冗长的内容！
一些冗长的内容！
一些冗长的内容！
...
一些冗长的内容！

我现在尝试在整个内容中添加一个右边距，所以我尝试在innerWrapper和/或outerWrapper中添加右边距，但被忽略了。左边的边距起作用了。实际上，我使用了

position:absolute

方法，而不是

float:left

来避免这些问题，但似乎不起作用。你知道我为什么不能把内容留到右边吗？即使我显式地设置了内包装或外包装的宽度，它仍然不起作用

有趣的是，主体没有正确的宽度-主体的宽度是浏览器窗口的宽度，而不是包装的宽度

---

应该说，内容（innerWrapper和下面的所有内容）是通过JS动态创建的，如果这很重要的话。

您可以使用负片

左边距
代替
右边距
，如下所示：

#innerWrapper{
    margin-left:-5px;
}

您可以使用负片
左边距
代替
右边距
，如下所示：

#innerWrapper{
    margin-left:-5px;
}

试试这个。也许对你有帮助

试试这个。也许对你有帮助

如果你想要一个荷利兹。布局时，首先设置
外套的高度

然后使用列表元素在“页面”中设置内容：

<div id="outerWrapper">
    <ul id="maincontent">
        <li ><a name="p1">Box 1</a></li>
        <li ><a name="p2">Box 2</a></li>
        <li ><a name="p3">Box 3</a></li>
        <li ><a name="p4">Box 4</a></li>
        <li ><a name="p5">Box n</a></li>
    </ul>
</div>

关于你的“为什么”问题：请注意。（顺便说一句，
float:
也会这样做）。
如果你想要一个水平。布局时，首先设置
外套的高度

然后使用列表元素在“页面”中设置内容：

<div id="outerWrapper">
    <ul id="maincontent">
        <li ><a name="p1">Box 1</a></li>
        <li ><a name="p2">Box 2</a></li>
        <li ><a name="p3">Box 3</a></li>
        <li ><a name="p4">Box 4</a></li>
        <li ><a name="p5">Box n</a></li>
    </ul>
</div>

关于你的“为什么”问题：请注意。（顺便说一句，
float:
也这样做）。
不抱歉，这不是浏览器不接受选项的问题，这是布局问题不抱歉，这不是浏览器不接受选项的问题，这是布局问题谢谢。我希望绝对元素留在DOM中。所以我想没有办法在绝对元素周围有一个包装器，而包装器会留在DOM树中？通过设置外套的宽度和高度，并给内包装一个填充权（右边空白仍然不起作用），我可以让它在某种程度上起作用。虽然我无法让你的解决方案发挥作用，但我想它与此类似。仍然在寻找一个解决方案，让我能够更好地控制我的内容布局。谢谢。我希望绝对元素留在DOM中。所以我想没有办法在绝对元素周围有一个包装器，而包装器会留在DOM树中？通过设置外套的宽度和高度，并给内包装一个填充权（右边空白仍然不起作用），我可以让它在某种程度上起作用。虽然我无法让你的解决方案发挥作用，但我想它与此类似。仍然在寻找一个解决方案，让我能够更好地控制我的内容布局。
#container{
    width:3000px;
    height:400px;
}

#maincontent{
    border:0;
    margin:0;
    padding:0;
}

#maincontent li{
    line-style:none;
    width:240px;
    height:380px;
    padding:10px;
    float:left;
}

#scroll-buttons{position:fixed;}