有趣的 CSS 响应式宽度问题

【问题标题】：Interesting CSS Responsive Width Trouble有趣的 CSS 响应式宽度问题
【发布时间】：2013-12-27 00:28:38
【问题描述】：

我正在设计一个网站

http://zinzinzibidi.com/TurkAntivirusResponsive/Anasayfa

右侧有空格问题。

http://www.responsinator.com/?url=http%3A%2F%2Fzinzinzibidi.com%2FTurkAntivirusResponsive%2FAnasayfa

您可以看到在 320px 宽度处有一个额外的“滚动 X”区域；

我的 CSS 文件：http://zinzinzibidi.com/Areas/TurkAntivirusResponsive/Content/css/style.css

我的 CSS 中看不到任何错误代码。

我该如何解决？

【问题讨论】：

CSS Responsive White Space Trouble 的可能副本

标签： css html responsive-design width media-queries

【解决方案1】：

我正在检查您的网站，额外的“滚动 x”区域是所有格式的尽量避免宽度和固定宽度改用 width=100% 好的，你放了

 html {
    font-family: sans-serif;
    overflow-x: hidden;
}

它的隐藏滚动但不能解决你的问题第一个菜单

.nav-mobile {
    margin: auto;
    position: relative;
    width: 320px; <-- delete or put 100%
}

下一行

.nav-mobile-button {
border-bottom: 1px dotted #777777;
cursor: pointer;
font-weight: bold;
height: 60px;
line-height: 60px;
margin: auto;
position: relative;
text-align: center;
transition: all 0.2s ease-in-out 0s;
width: 320px; <-- delete or put 100%

}

这只是你用你的 CSS 管理实验的一些行你有一些填充，迫使一些 div 部分离开屏幕

【讨论】：