2017-12-27 445 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'。 –