降低内联li的高度?

时间:2011-08-07 04:05:12

标签: html css

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

4 个答案:

答案 0 :(得分:3)

ul, li {
    height:50px;
}

........

答案 1 :(得分:0)

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

li {
  height: inherit;
}

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

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

答案 2 :(得分:0)

ul { position: relative; }

li { height: 100%; }

答案 3 :(得分:0)

为什么使用内联< 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