0

我想知道为什么我对这个站点的桌面 css 的内部包装不起作用。

基本上如果将 innerwrap 设置margin:0 auto; and width: auto;为没有问题，但它不是以页脚或主目录为中心div

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

无论如何，它是否可以流畅地过渡到下一个平板电脑尺寸布局，而不会出现滚动条并且内容会被挤压？

4

1 回答 1

0

由于您在 .innerwrap 中应用的填充，它显示滚动条

阅读这篇关于盒子模型的文章

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

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

删除这个：

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

拿着吧

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

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

您可能需要使用通用类来对齐它们

.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这样的网络检查器来追踪样式错误。

祝开发者好运！

于 2013-02-02T04:06:48.580 回答