Как отключить горизонтальную прокрутку?

-2

Как отключить горизонтальную прокрутку на моем веб-сайте?Как отключить горизонтальную прокрутку?

http://codepen.io/Thisisntme/full/eNPQOb/ это источник: http://codepen.io/Thisisntme/pen/eNPQOb?editors=110 Вы можете раскошелиться и поставить ссылку, если вы хотите.

Вот исходный код:

<body> 
    <div class="navbar"> 
     <div class="container"> 
     <ul> 
      <li><a href=".">HOME</a></li> 
      <li><a href=".">ART</a></li> 
      <li><a href=".">STUFF</a></li> 
      <li><a href=".">LINKS</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="mainTitle"> 
    <div class="container"> 
     <h1>Shane's Website!</h1> 
    </div> 
    </div> 
</body>

Вот CSS-код

@font-face { 
    font-family: Avenir; 
    src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf"); 
} 

body { 
    background-image: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/BACKGROUND.jpg"); 
    background-size: 1920px 1440px no-repeat; 
    background-color: #cccccc; 
} 
/*NAVIGATIONAL PANEL*/ 

.navbar { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 150%; 
} 

.navbar li { 
    list-style-type: none; 
    width: 100%; 
    font-family: Avenir; 
    src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf") 
} 

.navbar li a { 
    padding: 0px; 
    float: left; 
    width: 16%; 
    text-align: center; 
    color: black; 
} 
/*TITLE*/ 

.mainTitle { 
    margin: auto; 
    width: 100%; 
    padding: 6px; 
    background-color: rgba(0, 0, 0, 0.8); 
    position: absolute; 
    top: 60px; 
    left: -10px; 
    x 
} 

.mainTitle h1 { 
    color: white; 
    font-family: Avenir; 
    font-size: 75x; 
    text-align: center; 
}

источник

2015-07-28 10 Replies

То есть просто! Просто добавьте к html,body: max-width: 100% и overflow-x: hidden :) Вот обновленный код: http://codepen.io/anon/pen/Jdeoyy?editors=110.

источник

2015-07-28 00:15:02

Вы можете использовать правило

overflow-x: hidden;

в вашем теле тега

источник

2015-07-28 00:13:28

В вашем классе .navbar у вас установлена ширина 150%.

Измените это на 100%.

Ваш код:

.navbar { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 150%; /* change this to 100% to remove horizontal scrollbar */ 
}

источник

2015-07-28 00:15:32

Добавьте это к вашему телу:

overflow-x: hidden;

Это просто удалить полосу прокрутки. Я просматривал ваш код, и нашел, почему у него есть x-scroll. Если вы хотите удалить его, не делая overflow. Вам необходимо изменить ширину .navbar на 100% вместо 150%.

источник

2015-07-28 00:16:48 Nytrix

изменить каждый класс, который вы установили width:100%, до max-width:100%, чтобы он всегда соответствовал каждому окну просмотра.

Я сделал несколько изменений в вашем коде, чтобы сделать его более чистым.

вот фрагмент:

@font-face { 
 
    font-family: Avenir; 
 
    src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf"); 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-image: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/BACKGROUND.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-color: #cccccc; 
 
} 
 
/*NAVIGATIONAL PANEL*/ 
 

 
.navbar ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow:hidden; 
 
    max-width: 100%; 
 
} 
 
.navbar li { 
 
    list-style-type: none; 
 
    max-width: 100%; 
 
    font-family: Avenir; 
 
    src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf") 
 
} 
 
.navbar li a { 
 
    padding: 0px; 
 
    float: left; 
 
    width: 16%; 
 
    text-align: center; 
 
    color: black; 
 
} 
 
/*TITLE*/ 
 

 
.mainTitle { 
 
    margin: auto; 
 
    max-width: 100%; 
 
    padding: 10px; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    margin-top:5% 
 

 
} 
 
.mainTitle h1 { 
 
    color: white; 
 
    font-family: Avenir; 
 
    font-size: 75x; 
 
    text-align: center; 
 
}

<body> 
 
    <div class="navbar"> 
 
    <div class="container"> 
 
     <ul> 
 
     <li><a href=".">HOME</a> 
 
     </li> 
 
     <li><a href=".">ART</a> 
 
     </li> 
 
     <li><a href=".">STUFF</a> 
 
     </li> 
 
     <li><a href=".">LINKS</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="mainTitle"> 
 
    <div class="container"> 
 
     <h1>Shane's Website!</h1> 
 
    </div> 
 
    </div> 
 
</body>

источник

2015-07-28 00:23:35 dippas

Добавьте это в CSS Тело:

body { 
    width: 100%; 
    overflow-x: hidden; 
}

И если вы хотите, вы можете добавить эти:

margin: 0; 
padding: 0; 
max-width: 100%;

источник

2015-07-28 00:58:22 jdnoon

Как отключить горизонтальную прокрутку?

ответ

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