Question

这是我的代码：

HTML

<div class="menu">
    <ul>
      <li class="active"><a href="index.html">HOME</a></li>
      <li class="active"><a href="#">COMPANY</a></li>
      <li class="active"><a href="#">SOLUTIONS</a></li>
      <li class="active"><a href="#">SERVICES</a></li>
      <li class="active"><a href="#">NEWS & EVENTS</a></li>
      <li class="active"><a href="#">BLOGS</a></li>
      <li class="active"><a href="#">CONTACTS</a></li>
    </ul>
  </div>

CSS

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}

它无法识别高度功能。为什么？如何设置菜单项的高度？

Answer 1

你错过了一个分号： - ）

您还可以尝试设置li标签的line-height属性以更改元素中文本的位置。

Answer 2

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto;list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
.active{height:50px;}

Answer 3

ul设置为12像素的高度，至少在Firefox中。

Answer 4

高度是否设置在正确的元素上？你问的是如何设置菜单项的高度（可能是li），但你的CSS说你正在设置ul的高度。也许，将height: 12px;从.header .menu ul li移到{{1}}可能会有所帮助。

Answer 5

列表的高度不一定会更改可见列表项的高度。我创建了一个小示例来演示这些高度的外观，如果将鼠标悬停在这些项目上，就会看到高度在变化。这是因为列表的溢出属性。

.menu ul {
  margin: 10px 10px 10px 5px;
  padding: 10px;
  float: right;
  width: auto;
  height: 12px;
  list-style: none;
  background: cyan;
  overflow: hidden;
}

.menu ul:hover {
  overflow: visible;
}

.menu ul li {
  margin: 4px;
  padding: 4px;
  float: left;
  background: yellow;
}

<div class="menu">
  <ul>
    <li class="active"><a href="index.html">HOME</a></li>
    <li class="active"><a href="#">COMPANY</a></li>
    <li class="active"><a href="#">SOLUTIONS</a></li>
    <li class="active"><a href="#">SERVICES</a></li>
    <li class="active"><a href="#">NEWS &amp; EVENTS</a></li>
    <li class="active"><a href="#">BLOGS</a></li>
    <li class="active"><a href="#">CONTACTS</a></li>
  </ul>
</div>

无论如何，在您的示例中，HTML中没有带有“标头”类的div，这对于初学者来说很容易混淆。您的CSS规则以“ .header”开头。

Answer 6

只需根据需要增加padding-top和padding-bottom。线高效果其他。我通过测试发现了它。它对我有用。

如何在HTML中设置列表项的高度？

HTML

CSS

6 个答案: