Question

我正在使用菜单标签的内联无序列表。我可以看到li的高度大于ul。我想将li的高度设置为ul。我怎么能这样做，任何人都可以帮忙。

Answer 1

ul, li {
    height:50px;
}

........

Answer 2

如果您希望将li的高度设置为父ul的高度，则可以使用inherit功能：

li {
  height: inherit;
}

或者，您可以将它们设置为相同的数字：

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

Answer 3

ul { position: relative; }

li { height: 100%; }

Answer 4

为什么使用内联＆lt; li＆gt;？您可以像这样使用它：

<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

降低内联li的高度？

4 个答案: