html - 移动网站的 CSS 问题

Question

我正在 build this移动网站。

如果您在移动浏览器上检查它，它应该适合这样没有水平滚动。 (内容只能垂直堆叠)。有人可以帮我修复页面的 CSS。请告诉我正确的 CSS 应该是什么，以便针对不同的手机自动调整。

可以找到此页面的 CSS here .基本上，我猜有两个主要组成部分。 (正文和内容)。

此外，我使用了 this移动网站作为样本。请通过查看该页面的源代码来引用其内联 CSS。

谢谢

Answer 1

好吧，看来你的#content div 实际上正在插入屏幕的边界，即使在我的大型 firefox 浏览器上也是如此。在您的 CSS 中，您将其声明如下:

#content{
    width:100%;
    margin: 0;
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

我已经通过在本地编辑 CSS 确认，您的内边距实际上超出了 100% 宽度 div 的边界，但好消息是，由于它是 block 级元素，它已经填满了所有可用空间。尝试去掉“width:100%;”看看这是否适合你。它仍然会显示完全相同，但没有那些滚动条。

所以像这样:

#content{
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}