css - 为什么我的居中对齐的 div 不向左滚动？

Question

(注意:这些 div 上没有滚动条，因此实际上无法向左滚动，无论是在正文中还是在 div 本身内。)

问题(如上图所示，在 FF 和 Opera 中)存在于“巴洛克”和“聚光灯”主题选择(链接见下文)中，是当您将浏览器缩小时(例如宽度小于 900) , 水平滚动条不向左滚动。它会很好地向右滚动，但如果导航菜单被推到屏幕左侧并且完全无法访问，它根本不在乎。

是什么让它这样做？

这是相关的 HTML:

<div class="center1">
<div class="center2">
  <div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent">
    <div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png">
  </div>
</div>
</div>

<div class="center1">
<div class="center2">
<div id="containerBG">
    <div id="NavMenu">
                <ul class="kwicks">
            <li id="kwick1"></li>
            <li id="kwick2"></li>
            <li id="kwick3"></li>
            <li id="kwick4"></li>
            <li id="kwick5"></li>
            <li id="kwick6"></li>
            <li id="kwick7"></li>
                </ul>
    </div>
</div>
</div>
</div>

<div id="contentdiv"></div>

...和 ​​CSS:

body {
    background-image: url("../images/skin3/DIBG.png");
    background-repeat: repeat;
    font-family: "Times New Roman";
}

#NavMenu {
    float:left;
    width:170px;
    background-color: #000; 
    padding:5px; 
}

.center1 {
    position:absolute;
    right:50%;
}

.center2 {
    position:relative;
    left:50%;
}

#containerBGimgL {
    background-image:url('../images/skin3/dark_interface_parts5a.png');
    background-repeat: no-repeat;
    width:1040px;
    height:672px;
    display:inline-block;
}

#containerBG {
    width: 980px; 
    position:relative;
    top:274px;
}

#contentdiv
{
    position:absolute;
    top:320px;
    left:700px;
    width:600px;
    height:526px;

    text-align:left;

    padding: 0px 20px 0px 0px;
    background-color: #000;
    overflow-y: scroll;
    color:#fff;
}

javascript resize 函数改变了几个 div 的尺寸，但没有做任何会导致这个问题的事情。例如，它不会将任何 div 的溢出更改为隐藏。

要查看实际问题，请单击此处:http://www.solarcoordinates.com/testing3/index.html . (我目前在禁用 JS 时无法使用它，因此如果您想查看，则必须启用 JS。)

Answer 1

您应该使用另一种方法使主要部分居中:

• 关于 .center1删除你的 position和 right规则。
• 关于 .center2删除你的 position和 left规则。
• 关于 #containerBG , 添加 margin: 0 auto再次居中。

在启用 JS 的 Chrome 中进行测试，并将窗口大小调整为几个不同的大小，它看起来与以前一样，除了您的问题已解决。

它也适用于 Firefox，刚刚测试过。

看来你不再需要<div class="center1">了和 <div class="center2"> .您可以删除它们。