Css 为什么中间对齐的div不向左滚动？_Css_Html

Css 为什么中间对齐的div不向左滚动？

css html

Css 为什么中间对齐的div不向左滚动？,css,html,Css,Html,（注意：这些div上没有滚动条，因此实际上无法向左滚动，无论是在主体中还是在div本身内。） “巴洛克”和“聚光灯”主题选择（链接见下文）中都存在的问题（如上图FF和Opera中所示）是，当您将浏览器缩小（例如，小于~900宽度）时，水平滚动条不会向左滚动。它会向右滚动，但它根本不在乎导航菜单是否被推到屏幕左侧，并且完全无法访问是什么让它这么做的以下是相关的HTML： <div class="center1"> <div class="center2"> <

（注意：这些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>

javascript resize函数更改几个div的维度，但不会导致此问题。例如，它不会将任何div的溢出更改为隐藏

要查看实际问题，请单击此处：。（当JS被禁用时，我目前无法让它工作，因此如果您想查看，必须启用JS。）

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

在
```
.center1
```
上删除您的
```
位置
```
和
```
右侧
```
规则
在
```
.center2上
```
删除您的
```
位置
```
和
```
左侧
```
规则
在
```
#containerBG
```
上，添加
```
边距：0 auto
```
，使其再次居中

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

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

似乎您不再需要

和

。您可以删除它们。

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

在
```
.center1
```
上删除您的
```
位置
```
和
```
右侧
```
规则
在
```
.center2上
```
删除您的
```
位置
```
和
```
左侧
```
规则
在
```
#containerBG
```
上，添加
```
边距：0 auto
```
，使其再次居中

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

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

似乎您不再需要

和

。您可以删除它们。

我无法复制此内容，我看到一个水平滚动条按应有的方式显示。好的。。。屏幕截图很快就会出现。安德鲁，屏幕截图已经添加。我不能复制这个，我看到一个水平滚动条出现了它应该出现的样子。好的。。。很快就会有截图。安德鲁，截图已经添加。太棒了。。。谢谢看起来我仍然需要一个包装器（使用position:absolute并使多个div重叠），但这非常有效：

我没有完全了解你的网站是如何运作的-你有JS和多个主题。你确定它已经分类了吗？它还没有完全工作，但它解决了最初的问题。至于新问题，我将在一个新的“testing4”目录中处理它们希望我能在一个小时左右的时间里把一切都搞定。我出去吃了一顿胜利午餐。。。烧烤排骨！margin:0 auto方法在testing4目录中的Spotlights主题上运行良好：（单击顶部的Spotlights主题缩略图。）感谢您的帮助。。。现在我终于知道如何正确地将对象居中了！（抱怨W3C不赞成中心标签）太棒了。。。谢谢看起来我仍然需要一个包装器（使用position:absolute并使多个div重叠），但这非常有效：

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