css - 奇怪的调整大小与 960px 桌面站点的 innerwrap

Question

我想知道为什么我的桌面 css 内包装为 this site不工作。

基本上如果将 innerwrap 设置为 margin:0 auto; and width: auto; 没有问题，但是没有居中在footer或者main div

当我设置 innerwrap 时 margin:0 auto; and width:960px; 你会注意到，在稍微调整窗口大小后，页面出现了一个水平滚动条，所有内容都被挤压到左边，白色背景开始变得可见。

有没有办法让它流畅地过渡到下一个平板电脑尺寸的布局，而不出现滚动条和内容被压扁？

Answer 1

它显示滚动条是因为您在 .innerwrap 中应用了填充

Read this article about the Box Model

在将 100% 宽度应用于父元素时，在某些元素的两侧使用填充是不推荐的，因为它会增加整个组的宽度，并且由于您正在使用浏览器宽度，它会显示滚动条以查看额外的空间你添加了。

我的谦虚建议是，如果您希望 block 元素居中显示，请尽可能应用 margin:auto 样式规则，同样也必须显示为没有 float 的 block 元素。

删除这个:

    .innerwrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

保留这个

.innerwrap {
    margin: auto;
    width: 960px;
}

由于您为社交图标应用了固定边距，它们会显示错位，因此不要使用固定边距使它们居中，而是使用百分比宽度。

你可能想使用一个公共(public)类来对齐它们

.social {
    background-position: center center;
    background-repeat: no-repeat;
    display: block !important;
    float: none;
    height: 150px;
    margin: auto;
    padding-top: 50px;
    width: 30% !important;
}

对于 a.twittersocial 和 a.twittersocial:hover 以及其他社交链接只保留背景属性。

如果您需要将通用样式规则应用于多个元素(如果有很多元素)并尽可能避免使用 ID 选择器，请创建一个确定的类，而是使用类 (.daclass)。

使用类似 Firebug 的网络检查器追踪样式错误。

祝开发者好运!