CSS 水平菜单 - 等间距？

发布于 2024-07-29 02:05:21 字数 509 浏览 11 评论 0原文

我有一个标准的 CSS 菜单，由 UL 和 LI 标签制成。我需要它们水平地覆盖整个页面（不是我的真实情况，但我会以此来简化情况）。但是，这些项目是动态创建的，因此我无法对 LI 项目或边距进行硬编码。

我见过使用 JavaScript 来设置这些值的解决方案，但我真的很想避免它们。

最后，我看到了一个非常好的解决方案，它设置

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

This will create thedesired behavior in most browsers... except IE.

有任何想法吗？

编辑：感谢您的回复。但是，由于生成项目的代码不是我的，因此我无法在创建项目时设置内联样式，除非稍后使用 JavaScript。

原文

I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.

I've seen solutions using JavaScript to set those values but I would really love to avoid them.

Lastly, I've seen a pretty good solution which is setting

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

This will create the desired behavior in most browsers... except for IE.

Any ideas?

EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.

分享到QQ

分享到微博

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

发布评论

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

蓝眼泪 2024-08-05 02:05:22

您无法设置内联元素的高度或宽度。 http://www.w3.org/TR/CSS2/visudet.html #inline-width

尝试 display:inline-block;

这里是 ie 的修复：

display:inline-block;
zoom:1;
*display:inline;

You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width

Try display:inline-block;

here is the fix for ie:

display:inline-block;
zoom:1;
*display:inline;

回复收藏 0 原文

横笛休吹塞上声 2024-08-05 02:05:22

如果您想让元素获得整个可用空间，则无需先定义菜单元素的宽度（当然，这将有助于均匀调整 li 元素的大小）。您可以通过处理 display 属性来解决此问题。

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

请注意，width:1% 是必需的以避免单元格折叠。

If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Note that width:1% is required to avoid cell collapsing.

回复收藏 0 原文

对你而言 2024-08-05 02:05:22

如果您的菜单项是动态生成的（因此您不知道之前会有多少个），那么您可以向 li 添加 style="width:xx" 属性code>s （或者在顶部的

回复收藏 0 原文

时间你老了 2024-08-05 02:05:22

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

如果您有 5 个元素，考虑到边框和填充，则宽度：18% 可能是正确的。但它会根据你有多少元素、多少填充等而有所不同。

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.

回复收藏 0 原文

萌︼了一个春 2024-08-05 02:05:22

如果您愿意使用 Flexbox，那么这并不难。我即将发布的代码完全归功于 CSS 技巧因为这是他们的 CSS。

以下是包含供应商前缀的示例。

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Flexbox 的唯一问题是您是否需要支持 IE 9 及以下版本，否则，我认为没有理由不使用 Flexbox。您可以在此处查看浏览器对 Flexbox 的支持。

If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricks as this is their CSS.

Below is an example that includes vendor prefixes.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.

回复收藏 0 原文

客…行舟 2024-08-05 02:05:22

这对我有用：

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}

Here's what worked for me:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}

回复收藏 0 原文

~没有更多了~