Question

enter image description here

如图所示（我还将代码放入试图使其更容易一些）。网站侧面滚动（不应该发生），身体呈蓝色轮廓，但右侧有额外的可滚动空间。

你也可以在css中看到我可以使用overflow-x: hidden;来隐藏“额外”空间，但这还不够好，因为如果我在另一个元素上使用float: right;，那么使用overflow-x: hidden;，float: right;元素将不在屏幕边缘。

我的问题是这个“额外”空间来自哪里？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Site</title>
    <meta name="viewport" content="width=device-width, initial-width=1, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

</head>

<body>
<!--    <div id="navanchor"></div>Anchor to change nav size on scroll-->
        <div id="container">

            <nav id="nav">
                <img id ="logo" src="http://placehold.it/160x75" alt="Max's barbers logo.">

                <ul id="menu">
                    <li><a href="#top">Home</a></li>
                    <li><a href="#prices">Prices</a></li>
                    <li><a href="#aboutus">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul><!--menu-->
            </nav>

<!--slider-->
            <!--=============-->
<!--end slider-->
<!--            <div id="top"></div>Anchor for scroll to top button-->
    </div><!--container-->

<!--Scripts
=====================================================-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!--Custom JS
=====================================================-->
    <script src="assets/js/app.js"></script>

<!--==============-->



</body>
</html>

＆安培; CSS

/*      1 - Fonts
        2 - Site Wide Styles
            2a - Navigation
            2b - Scrollbar
            2c- Selection
        3 - Sections
        4 - Media Queries
==============================================================*/
/* 1 - fonts
==============================================================*/
@import url(http://fonts.googleapis.com/css?family=Oswald|Raleway);
/*
font-family: 'Oswald', sans-serif;

font-family: 'Raleway', sans-serif;
*/
/* 2 - site wide styles
==============================================================*/
* {
    color: #75e7ff;
    font-family: 'Oswald', sans-serif;

    -webkit-transition: all 0.43s cubic-bezier(0.35, 1.32, 0.49, 1.01);
    transition: all 0.43s cubic-bezier(0.35, 1.32, 0.49, 1.01);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
/*    overflow-x: hidden;*/
}

body {
    background-color: #383838;
}

#container {
    width: 100%;
}

ul {
    margin: 0;
    padding: 0;
}

/* 2a - Navigation
==============================================*/
nav {
    width: 100vw;
    height: 4.75em;
    padding: 0.5em 2em;
    background-color: rgba(255, 255, 255, 0.25);
}

#menu {
    float: right;
    margin-top: 1.5em;
    margin-right: 5.25em;
}

#menu li {
    display: inline;
    margin-left: 1.5em;
}
#menu li:first-child {
    margin: 0;
}

/* 3 - Sections
==============================================================*/
/* 3a - Home
==============================================*/


/* 4 - Media Queries
==============================================================*/

Answer 1

问题在于

#menu {
    float: right;
    margin-top: 1.5em;
    margin-right: 5.25em;
}

nav {
    width: 100vw;
    height: 4.75em;
    padding: 0.5em 2em;
    background-color: rgba(255, 255, 255, 0.25);
}

只需改变保证金权利：5.25em;符合您的要求并删除导航的宽度。

#menu {
    float: right;
    margin-top: 1.5em;
    margin-right: 25px;
}

nav {
    height: 4.75em;
    padding: 0.5em 2em;
    background-color: rgba(255, 255, 255, 0.25);
}

a fiddle is here

Answer 2

在nav

下的css中删除此行

 width: 100vw;

Answer 3

导致此问题的问题有两个。首先，

nav {
    width: 100vw; /* remove this -- you don't need it! */
    ...
}

其次，正如其他答案所述，

#menu {
    float: right;
    margin-top: 1.5em;
    margin-right: 0; /* changed from 5.25em */
}

jsFiddle：http://jsfiddle.net/voveson/0gLvog4q/1/

Answer 4

问题在于保证金权利......

我会使用以下

#menu {
    float: right;
    margin-top: 1.5em;
    margin-right: 0px !important;
}

还删除以下内容以获取整个内容的宽度

width: 100vw;

Answer 5

我不认为人们了解OP的设置和他们的问题。如果他删除了width: 100vw（就像很多人说的那样），那么水平的“弹跳”效果将不再起作用，并且它们会留下静态导航菜单。

问题是nav左右填充，但要删除它不会是最好的结果。相反，您必须在DIV之后添加嵌套的NAV并在那里添加填充。看到这段代码：

HTML

<nav id="nav">
    <div class="box">
      <img id ="logo" src="http://placehold.it/160x75" alt="Max's barbers logo.">

      <ul id="menu">
        <li><a href="#top">Home</a></li>
        <li><a href="#prices">Prices</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul><!--menu-->
    </div>
</nav>

更改了CSS

nav {
    width: 100vw;
    height: 4.75em;
    padding: 0.5em 0;
    background-color: rgba(255, 255, 255, 0.25);
}
.box {
    padding: 0 2em
}

Here is your fiddle。希望有所帮助。

这个额外的空间来自哪里？

5 个答案: