降低內聯li的高度嗎？

我正在使用內聯無序列表菜單選項卡。我可以看到李的高度大於ul。我想將li的高度設置爲ul。我該怎麼做，任何人都可以幫忙。降低內聯li的高度嗎？

2011-08-07 satheesh.droid

發佈您的代碼請 – fatnjazzy

你嘗試給'li'元素的頂部和底部零填充，並在頂部和底部零邊距？你有什麼嘗試？ –

@Ray Toal Tes，但它不起作用 –

如果你想設定一個li父ul的高度的高度，你可以使用inherit功能：

li { 
    height: inherit; 
}

或者，也可以兩者都設置爲同一個號碼：

ul, li { 
    height: /*insert height*/; 
}

來源

2011-08-07 04:10:55

ul, li { 
    height:50px; 
}

........

來源

2011-08-07 04:11:04 AlienWebguy

ul { position: relative; } 

li { height: 100%; }

來源

2011-08-07 07:04:17 Joey

您可以通過提供一些詳細信息以及它在哪些瀏覽器中的作用來改進此答案嗎？ – Pindatjuh

爲什麼使用內聯<li>？您可以隨時使用它像這樣：

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul>

CSS代碼：

ul li { 
    display: block; 
    width: 100px; 
    float: left; 
    height: xxxx; //anythin you want here 
}

與解決方案的唯一問題是菜單項的寬度不變。如果你真的需要這個，你的解決方案將是內嵌塊CSS屬性。

<html> 
<head> 
<style> 
ul li { 
    background: red; 
    display: inline-block; 
    line-height: 90px; 
} 
ul { 
    background: green; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><a href="">One</a></li> 
    <li><a href="">Two</a></li> 
    <li><a href="">Three</a></li> 
</ul> 
</body> 
</html>

您可以設置寬度，高度，背景和其他許多元素，但元素仍然在文本流內。

預覽代碼：http://albitos.eu/~albi/stackoverflow/inline-li-height.html

來源

2011-08-07 08:15:03

降低內聯li的高度嗎？

回答

相關問題