2016-12-15 28 views
1

Hy,我试图写我自己的网站。不是专业代码,但我认为是好的:D 所以,我的问题是,那么滚动条被隐藏起来,并且两个英雄部分之间有一个空格。问题是什么?是的,有4个英雄,具有相同的CSS代码。滚动条不可见和2格之间的空格

.hero1 { 
 
     background-color: white; 
 
     width: 100%; 
 
     height: 500px; 
 
     display: inline-block; 
 
     margin-top: 100px; 
 
     align-items: center; 
 
    
 
     h1 { 
 
     font-family: "Open Sans", sans-serif; 
 
     font-weight: 300; 
 
     color: black; 
 
     margin-left: 100px; 
 
     position: absolute; 
 
     top: 30%; 
 
     } 
 
     p { 
 
     position: absolute; 
 
     top: 30%; 
 
     font-family: "Open Sans", sans-serif; 
 
     font-weight: 400; 
 
     color: black; 
 
     margin-left: 40%; 
 
     margin-right: 10%; 
 
     } 
 
    } 
 
    
<div id="about" class="hero1"> 
 
     <h1> About me</h1> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, est sit amet bibendum posuere, diam magna sagittis arcu, et mollis quam felis mattis est. 
 
      Suspendisse malesuada lobortis tempor. Vestibulum quis ligula elit. Sed porttitor sed diam id dapibus. Etiam nec tincidunt dolor, vel auctor dolor. Cras enim velit, 
 
      vulputate in interdum in, aliquet in quam. Sed volutpat, nunc id viverra blandit, diam nulla luctus ipsum, eget condimentum felis metus eget ante. Nam pulvinar convallis 
 
      eros eget consectetur.</p> 
 
    </div>

+0

好:100px的 - 这是块之间空间的原因......另外,我不能用滚动条重新创建问题。你设置了溢出:隐藏在身体,在CSS的某个地方? – sinisake

+0

你的标记有一些问题。 css不能嵌套(在这种情况下) – happymacarts

+1

@happymacarts:_“css不能嵌套(在这种情况下)”_ - 悬停在'sass'标签上... – CBroe

回答

0

我想我可能已经找到了问题。你的例子有一些可能的拼写错误,在hero1类中有一个缺失的“}”。

让,你使用的margin-top我知道如果这能解决您的问题

.hero1 { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: inline-block; 
 
    margin-top: 100px; 
 
    align-items: center; 
 
} /* you were missing this brace */ 
 
h1 { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 300; 
 
    color: black; 
 
    margin-left: 100px; 
 
    position: absolute; 
 
    top: 30%; 
 
} 
 
p { 
 
    position: absolute; 
 
    top: 30%; 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 400; 
 
    color: black; 
 
    margin-left: 40%; 
 
    margin-right: 10%; 
 
} 
 
/* and had an extra one here */
<div id="about" class="hero1"> 
 
    <h1> About me</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, est sit amet bibendum posuere, diam magna sagittis arcu, et mollis quam felis mattis est. Suspendisse malesuada lobortis tempor. Vestibulum quis ligula elit. Sed porttitor sed 
 
    diam id dapibus. Etiam nec tincidunt dolor, vel auctor dolor. Cras enim velit, vulputate in interdum in, aliquet in quam. Sed volutpat, nunc id viverra blandit, diam nulla luctus ipsum, eget condimentum felis metus eget ante. Nam pulvinar convallis 
 
    eros eget consectetur.</p> 
 
</div>

+0

是的,它的工作,但我搞砸了h1和P的位置,它的相对和相对没有作品,只有绝对:S – Natixco

+0

这是图片:http://imgur.com/a/Ryfb3 – Natixco

+0

好吧,我制作了一个div并放入了英雄。它有显示:内嵌块,我有滚动条。我写入了英雄的css margin-bottom x px。但是,感谢帮助伙计:D – Natixco