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

发布于 2024-09-06 01:13:59 字数 940 浏览 5 评论 0原文

这是我的代码：

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;}

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

原文

Here is my code:

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;}

It does not recognize the height feature. Why? How can I set the height of menu item?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

饭团 2024-09-13 01:13:59

您缺少分号:-)

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

.line-height-li {
    line-height: 30px;
}

You're missing a semicolon :-)

You can also try setting the line-height property of the li tags to change the position of the text in the element:

.line-height-li {
    line-height: 30px;
}

回复收藏 0 原文

零時差 2024-09-13 01:13:59

只需根据需要增加 padding-top 和 padding-bottom 即可。线高影响其他。我通过测试发现了这一点。它对我有用。

回复收藏 0 原文

昵称有卵用 2024-09-13 01:13:59

.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;}

.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;}

回复收藏 0 原文

昔日梦未散 2024-09-13 01:13:59

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

回复收藏 0 原文

风吹雪碎 2024-09-13 01:13:59

元素的高度设置正确吗？您询问如何设置菜单项的高度（大概是 li），但 CSS 表示您正在设置 ul 的高度。也许，将 height: 12px; 从原来的位置移动到 .header .menu ul li 可能会有所帮助。

回复收藏 0 原文

微暖i 2024-09-13 01:13:59

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

.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 & 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”开头。

The height of the list does not necessarily change the height of the visible list items. I created a small example to show how those heights look like, if you hover on the items, you'll see the height's changing. That because of the overflow attribute of the list.

.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 & EVENTS</a></li>
    <li class="active"><a href="#">BLOGS</a></li>
    <li class="active"><a href="#">CONTACTS</a></li>
  </ul>
</div>

Anyway, in your example, there's no div with a class "header" in your HTML, that's confusing for beginners. Your CSS rules begin with ".header".

回复收藏 0 原文

~没有更多了~