1

我正在通过一个几乎只有 CSS 的解决方案来为我们的电子商务网站制作一个移动网站。它实际上进展顺利，除了 x 轴始终有一个不应该存在的边距这一事实 - 我已经将它放在 CSS 中，大多数属性的宽度都是 100%。

唯一在视觉实践中起作用（它使 y 滚动非常卡顿）是添加：

html
{
overflow-x:hidden;
}

因此，尽管它看起来很棒并且正是我想要的，但我无法修复滚动，这对于移动网站毫无意义。

最重要的是，我还将它添加到页面以检测屏幕大小：

<meta name="viewport" content="width=device-width,initial-scale=1" />

我认为媒体查询在某处造成了严重破坏：

@media screen and (max-width: 480px) {

因为它是唯一指定任何东西的 480px 方面的地方，而这正是边距继续的地方。那么我在这里做错了吗？

事后看来，我不完全确定我从哪里得到 480px - 认为这是一个复制和粘贴工作！

我尝试过的其他事情是从许多元素中删除绝对定位，确保所有内容都具有自动宽度并显示在一个块中。

我没有想法，只想让一切都像overflow-x解决方案！

提前致谢。

4

2 回答 2

2

通常，您不必指定width: 100%任何内容。

您可能在其中一个元素上有一些填充或其他东西，导致它> 100％。默认情况下，所有display: block元素都将填充宽度，您无需指定。

它也不总是填充，margin-right 已经让我抓到了足够多的时间，因为你实际上看不到它，但它就在那里，推出了内容

于 2013-07-25T12:56:29.120 回答
1

My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.

于 2013-07-25T13:00:48.877 回答