6

我有点问题。出于某种原因,我的代码中不断出现水平滚动条。我已经尝试了所有方法,但似乎无法删除它。以下链接是代码的实时预览。

http://jsfiddle.net/y5x7V/

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;
}
4

7 回答 7

5

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

.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;

}

padding: 10px在应用 100% 宽度时会考虑到您。

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

于 2013-06-11T13:02:46.900 回答
2

添加 overflow-x:hidden

到主包装类

于 2013-06-11T12:58:49.023 回答
1

这是因为您将 100% 宽度和填充结合在一起。例如,如果 100% 宽度计算为 100px,则在其顶部左右添加 5px 填充将导致您的元素的总宽度为 110px。您可以通过更改元素的box-sizing.

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

JSFiddle 演示

于 2013-06-11T13:00:34.517 回答
0

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

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

body {
  line-height: 1;
  text-align: center;
  overflow-x: hidden;
}
于 2013-06-11T12:57:54.267 回答
0

您提供的 css 的第 261 行,从padding: 10px;, 更改为padding: 10px 0;.

于 2013-06-11T13:08:57.847 回答
0

您可以通过在 CSS 中修复top类来正确解决此问题,而不是在某些 CSS 中修改来隐藏滚动条。通过添加以下内容将填充设置为 0(因为它占用了父级的整个宽度):

padding:0;

.top

JSFiddle

您可以设置填充的高度属性以获得原始外观,这只是演示它为什么会损坏的快速修复。

于 2013-06-11T13:00:36.293 回答
0

改变

.top {padding:10px;} 

.top {padding:10px 0; }
于 2013-06-11T13:00:40.680 回答