Question

我遇到了一些问题。出于某种原因，水平滚动条会一直显示在我的代码中。我已经尝试了所有东西，但我似乎无法删除它。以下链接是代码的实时预览。

HTML

 <body>
 <section class="contain">
 <div id="section-nav" class="section-nav">
 <div class="top">
 <ul>
 <li class="logo"><a href="#">Magna Contra</a></li>
 <li class="active"><a href="#">Blog With Us</a></li>
 <li><a href="#">Compxta</a></li>
 <li><a href="#">Laurie</a></li>
 <li><a href="#">SUBTITLESOFLIFE</a></li>
 </ul>
 </div>
 </div>
 </section>

 <div class="bg">

 <h1>SUBTITLESOFLIFE</h1>
 </div>

 <ul class="check">
 <li class="bold"><a href="#">Hot Trends</a></li>
 <li class="topic"><a href="#">Daft Punk</a></li>
 <li class="topic"><a href="#">#bbcqt</a></li>
 <li class="topic"><a href="#">Petite Noir - Major</a></li>
 <li class="topic"><a href="#">Alt J Album Teaser</a></li>
 <li class="topic"><a href="#">Materialistic Happine$$</a></li>
 <li class="topic"><a href="#">WOLF</a></li>
 </ul>

 <div class="contar">
  Lorem Dosi
 </div>

 </body>
 </html>

CSS

ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}

.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;

}




::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}

li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}

li a{
  text-decoration: none;
  color:#bbbbbb;
  font-family: "proxima-nova",sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.78em;
letter-spacing: .2em}

hr{
  color:#dfe0db;
    border: 0;
background-color: #dfe0db;
height: 1px;
}

.bold{
  display: inline;
}

.bold a{
  color:#e94378;
}
.topic{
  display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;

}

.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}

.topic a:hover{
  color:#e94378;text-decoration:none}

}

.logo a{
  color:#bbb;
  font-size: 0.78em;
  text-decoration: none;
  text-transform: uppercase;
}


img#hv {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

img#hv:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}

.image span {position: absolute; line-height: 20px; display: block; top: 50%; 
    margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
    text-transform: uppercase;
    font-size: 1.5em; letter-spacing:;}


@media screen and (max-width:800px) { 
   .image span { 
        font-size:0.8em; 
    }
}
@media screen and (max-width:400px) { 
    .image span {
        font-size:0.7em; 
    }
}



.bg{
  background-color: #e94378;
}

img.ri
 {
 position: relative;
 max-width: 100%;
 width:100%;
 display: inline-block;
 vertical-align: middle;
 }

 @media screen and (orientation: portrait) {
 img.ri { max-width: 100%; }
 }
 @media screen and (orientation: landscape) {
 img.ri { max-height: 100%; }
 }


.text{
font-family: "proxima-nova";
  font-size: 1em;
letter-spacing: .2em;
  text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}

.tex{
  font-family: "proxima-nova",sans-serif;
  font-size: 2.5em;
  letter-spacing: 3px;
  text-transform: uppercase;
  bottom:160px;
  left: 320px;
  color:white;
  padding: 10px;


}

.image{
  vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
  color:white;
}

.contain{
  display: table;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.block {
  display: table-row;
  height: 1px;
}
.navigation {
  display: inline-block;
  padding: 10px;
  width:100%;
  margin: auto;
  height: 150px;
}

.top {
  background-color: #444;
  width:100%;
  display: inline-block;
  padding: 10px;
  text-align: center;


}

.navigation:nth-child(odd) {
  background: #222;

}
.push {
  height: auto;
}
.contar {
  margin: 0 auto;
  text-align: center;
  width:100%;
  height:400px;
  background-color: white;


}

img.ft{
  float:left;
}
.featured{
  background-color: white;
  width:69%;
  text-align: center;
  margin: 0 auto;
  display: inline-block;;
}
.block:nth-child(odd) {
  background: #fff;
}


.search {
border:0px; 
background-color:transparent; 
color:white;
display: inline-block;
height:28px;
}

.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}



h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}



.txt{
  font:800 proxima-nova;
}







h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}

Answer 1

不要使用overflow-x: hidden - 它只能解决问题，不能解决问题。您可以使用顶部div上的box-sizing属性来修复它：

.top {
    background-color: #444;
    width:100%;
    display: inline-block;
    padding: 10px;
    text-align: center;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}

在应用100％宽度时会考虑padding: 10px。

您还可以使用polyfill使用Modernizr插件检查浏览器支持。

Answer 2

您可以将body-overflow-x设置为隐藏

http://jsfiddle.net/y5x7V/1/

body {
  line-height: 1;
  text-align: center;
  overflow-x: hidden;
}

Answer 3

添加 overflow-x:hidden

到主包装类

Answer 4

这是因为你将100％宽度和填充结合起来。例如，如果100％宽度评估为100px，则在其上方的左侧和右侧添加5px填充将导致您的元素的总宽度为110px。您可以通过更改元素box-sizing来解决此问题。

.bottom, .top {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

JSFiddle demo

Answer 5

您可以正确修复此问题，而不是通过修复CSS中的top类来隐藏滚动条。通过添加：

将填充设置为0（因为它占据父项的整个宽度）

padding:0;

到.top

JSFiddle

您可以设置padding的height属性以获得原始外观，这只是一个快速解决方案来演示它为什么会破坏。

Answer 6

更改

.top {padding:10px;}

到

.top {padding:10px 0; }

Answer 7

您提供的CSS第261行，从padding: 10px;更改为padding: 10px 0;。

不需要的水平滚动条

7 个答案: