html - 设置没有“位置：绝对”的li的高度

Question

我想制作一个带有背景的 li 元素的菜单，所以我想设置heightand width，但我不能这样做。我试过position: absolute;了，但是当我这样做时，列表项会彼此重叠。

有没有办法改变高度/宽度position: absolute;？

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

Answer 1

您可以尝试调整line-height 或display: block与widthand一起使用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，因为它意味着换行。

希望有帮助