Question

我想制作一个包含背景的li元素的菜单，所以我想设置height和width，但我不能这样做。我尝试了position: absolute;，但是当我这样做时，列表项会相互重叠。

有没有办法在没有position: absolute;的情况下更改高度/宽度？

我之前从未遇到过这个问题，我无法弄清楚它是什么，我希望你能提供帮助。提前谢谢。

Answer 1

您可以尝试调整line-height或使用display: block以及width和height：

<ul class="one">
    <li>One</li>
    <li>Two</li>
</ul>

<ul class="two">
    <li>One</li>
    <li>Two</li>
</ul>

.one li {
    line-height: 2em;
    background-color: green;
}

.two li {
    display: block;
    background-color: pink;
    width: 50px;
    height: 50px;
}

http://jsfiddle.net/PJvq4/

Answer 2

LI元素默认为 display：list-item ，忽略高度。高度和宽度是对显示块和内联块或浮动元素有效的css属性。

在你的情况下，如果你想要一个包含高度固定元素的垂直列表，那就去 display：block ，因为它意味着换行。

希望有帮助

设置li的高度没有“position：absolute”

2 个答案: