1

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

<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>

我现在正在尝试为整个内容添加一个margin-right，所以我尝试向innerWrapper 和/或outerWrapper 添加margin-right，但它被忽略了。左边距正在工作。我实际上使用了这种position: absolute方法而不是float: leftas 来避免这些问题，但似乎它不起作用。任何想法为什么我不能对内容进行边距调整？即使我在内部或外部包装器上明确设置了宽度，它仍然无法正常工作。

有趣的是，body 的宽度不正确——body 的宽度是浏览器窗口的宽度，而不是包装器的宽度。

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

4

3 回答 3

1

如果你想要一个水平。布局，首先设置outerWrapper.

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

<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>

现在对于导航系统，您可以：

<div id="scroll-buttons">
    <a href="#p1">Go to the section 1</a> |
    <a href="#p2">Go to the section 2</a> |
    <a href="#p3">Go to the section 3</a> |
    <a href="#p4">Go to the section 4</a>
</div>

CSS：

#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;}

关于您的“为什么”问题：请注意，绝对定位的元素会退出 DOM 结构树。（顺便说一句，float:也这样做）。

于 2013-10-19T09:27:29.583 回答
0

您可以像这样使用负数 ：margin-leftmargin-right

#innerWrapper{
    margin-left:-5px;
}
于 2013-10-19T08:56:15.297 回答
0

尝试这个。也许对你的情况有所帮助。

.class
{
margin-right:10px !important; 
}
于 2013-10-19T09:13:02.550 回答