在ul - > li - >一個設計li不展開高度以匹配標籤高度

有人可以向我解釋爲什麼li和ul不會在plunkr波紋管中展開？在ul - > li - >一個設計li不展開高度以匹配標籤高度

我知道很多人已經寫了關於這個，但我發現所有玩過溢出，高度，位置和顯示CSS屬性。我沒有使用任何。

a { 
 
     padding: 1em; 
 
     background-color: red; 
 
     } 
 
     ul { 
 
     list-style: none; 
 
     background-color: yellow; 
 
     display: flex; 
 
     } 
 
     
 
     li { 
 
     background-color: green; 
 
     display: inline-block; 
 
     }

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <ul> 
 
    <li> 
 
     <a href="http://google.si">google</a> 
 
    </li> 
 
    <li> 
 
     <a href="http://sometest.com">test item</a> 
 
    </li> 
 
    </ul> 
 
    </body> 
 

 
</html>

來源

2017-05-23 Makla

刪除默認padding可有人請向我解釋，爲什麼李和UL不擴大

因爲你的鏈接仍然在線，併爲此他們填充流出線框。

爲鏈接添加display: block。

來源

2017-05-23 11:29:36 CBroe

在a設置display:block因爲a是一個內聯級別的元素，從而使其塊級

也不必display:inline-block在li因爲你在ul

有 display:flex

您也可以從ul

a { 
 
    padding: 1em; 
 
    background-color: red; 
 
    display: block 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding:0; 
 
    background-color: yellow; 
 
    display: flex; 
 
}

<ul> 
 
    <li> 
 
    <a href="http://google.si">google</a> 
 
    </li> 
 
    <li> 
 
    <a href="http://sometest.com">test item</a> 
 
    </li> 
 
</ul>

來源

2017-05-23 11:29:19 dippas

默認a爲inline元素，所以它不包括padding的高度，只需將其更新爲block標籤元素即可。那麼ul和li將花費。更新到block label您可以添加display:block或display: inline-block或float: left。

來源

2017-05-23 11:30:56

只需添加display:block in anchor tag

 ul { 
 
     list-style: none; 
 
     background-color: yellow; 
 
     display: flex; 
 
     margin:0px; 
 
     padding:0px; 
 
     } 
 
     
 
    ul li { 
 
     background-color: green; 
 
     display: inline-block; 
 
     } 
 
     ul li a { 
 
       padding: 1em; 
 
     background-color: red; 
 
     display:block; 
 
     }

<ul> 
 
    <li> 
 
     <a href="http://google.si">google</a> 
 
    </li> 
 
    <li> 
 
     <a href="http://sometest.com">test item</a> 
 
    </li> 
 
    </ul>

來源

2017-05-23 11:31:04 LKG

在ul - > li - >一個設計li不展開高度以匹配標籤高度

回答

相關問題