Откуда это дополнительное место?

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>

& СМЧ

/*  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 
==============================================================*/

источник

2015-06-12 bassjunkie223

Можете ли вы сделать скрипку, пожалуйста? https://jsfiddle.net – cptstarling

Есть две проблемы, вызывающие эту проблему. Во-первых,

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/

источник

2015-06-12 22:36:31 Vince

Спасибо, что сделал трюк! – bassjunkie223

вопрос с

#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

источник

2015-06-12 22:29:14 tylerlindell

Это само по себе не решит проблему - она просто подталкивает навигационные ссылки с правой стороны экрана, что приводит к тому, что страница все еще прокручивается по горизонтали. – Vince

там вы идете! просто удалите навигационную ширину! – tylerlindell

удалить эту строку в CSS, как раз под nav

width: 100vw;

источник

2015-06-12 22:35:14

Проблема заключается в запас правого ...

Я бы использовать после

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

также удалить следующий по ширине всей вещи

width: 100vw;

источник

2015-06-12 22:38:46 Eric

Я не думаю, что люди понимают, что ОП настроят и их вопрос. Если он удаляет 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. Надеюсь, это поможет.

источник

2015-06-12 22:47:17 crazymatt

Откуда это дополнительное место?

ответ

Смежные вопросы