宽度超过浏览器窗口答案

【问题标题】：width exceeds browser window宽度超过浏览器窗口
【发布时间】：2014-04-10 21:07:06
【问题描述】：

我已经查看了有关此主题的先前问题，但是在遵循了我可以找到的建议并查看了完整的 CSS 之后，我无法理解这个...

我在 body 上的宽度，html 设置为 100%，我找不到任何在填充等方面造成的影响。

谁能指出问题所在？可能是一些我只是想念的非常简单的东西。

很抱歉没有只发布一个 sn-p 左右，但我真的找不到问题。

问候，尼克拉斯

【问题讨论】：

【解决方案1】：

您的问题似乎出在您的.nav ul 上。 margin-right: -8%; 对我来说似乎是个问题。

其他人需要点击进入 Niklas 的项目之一，例如 http://www.niklaskoskela.com/hkr.html

【讨论】：

一个可能的答案。目前尚不清楚这是否是实际问题，但...+1 用于深入了解
谢谢 damienoneill2001，这解决了这个问题......但是，我仍然体验到一个小卷轴。如果您知道我的意思，这是一个真正的问题还是一直存在？非常感谢！
为赞成票喝彩。当我删除它时，它对我有用。希望它无论如何都能将@don_koskela 指向正确的方向！
另外，如果没有 -8%，我似乎无法让“上一个”、“关闭”、“下一个”图标回到那个位置......对此有什么建议吗？

【解决方案2】：

我认为问题在于 div id="wrapper" 高度。删除 height:100% 并检查..

#wrapper {
width: 100%;
/*height: 100%;*/
}

【讨论】：

【解决方案3】：

我同意 damienoneill2001 这就是问题

如下改变你的css

.nav ul {
    float: right;
    margin-left: 20px;
    margin-top: 1.6%;
    padding-top: 1%;
    width: 40%;
}

从主体width:100% 中删除宽度，它将占用auto 宽度

body {
    background-color: #F5F5F5;
    height: 100%;
    text-decoration: none;
}

让我们更新一些用于导航的 css 以使其右转

.nav ul li a.next img { float: right; margin-right: 20%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul li a.close img { float: left; margin-left: 8%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul li a.previous img { float: left; margin-left: 19%; opacity: 0.7; text-decoration: none; width: 15%; }

.nav ul { float: right; margin-top: 1.6%; padding-top: 1%; width: 24%; }

还请更新hover 的width 和margin 的类

【讨论】：