2017-12-27 468 views
-1

这里发生的事情:The result不能接壤我想,因为填充的方式

代码:(HTML)

<ul class="menu" style=" 
    margin-top: 0px; 
    margin-bottom: 0px;"> 
    <li>Home</li> 
    <li>News</li> 
    <li>Contact</li> 
    <li>About</li> 
</ul> 

代码:(CSS)

.menu { 

list-style-type: none; 

background-color: #B7FFED; 

font-size: 70px; 

display: inline-block; 

font-family: 'Lilita One', cursive; 

padding: 0px; 

height: 1000px; 

} 



.menu li{ 

padding-bottom: 100px;  
padding-top: 10px; 
border: 2px solid; 

} 

我想这能够只接近单词但没有巨大差距。下面是我想要的图片:The thing I want

+0

更改填充保证金 –

+0

噢是的正确,它有助于! – RuhanUR

回答

1

您需要使用margin代替padding并添加overflow: hidden,让你的利润不塌陷:

.menu { 
 
    list-style-type: none; 
 
    background-color: #B7FFED; 
 
    font-size: 70px; 
 
    display: inline-block; 
 
    font-family: 'Lilita One', cursive; 
 
    padding: 0px; 
 
    height: 1000px; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.menu li { 
 
    margin-bottom: 100px; 
 
    margin-top: 10px; 
 
    border: 2px solid; 
 
}
<ul class="menu"> 
 
    <li>Home</li> 
 
    <li>News</li> 
 
    <li>Contact</li> 
 
    <li>About</li> 
 
</ul>

+0

崩溃是什么意思? – RuhanUR

+0

我确信他会问你这个问题:)顺便说一句,我不认为我们会在这种情况下的问题 –

+1

我想出了现在崩溃的意思,但帮助是很好的感谢您的帮助。虽然我有点笨拙 – RuhanUR

0

我只用了以改变填充边缘,使其发生..

+0

是的,请检查我的答案,以另一个选项使用'overflow:hidden'。 –