1

我有一个像这样的 CSS 菜单：

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

我想创建这个：

|------------------------------------------------|
| 项目1 |
|------------------------------------------------|
| 项目二 |
|------------------------------------------------|
| 项目 C |
|------------------------------------------------|
| 一个相当长的菜单项在这里 |
|------------------------------------------------|

但我得到了这个：

--------
| 项目1 |
|-----------
| 项目二 |
|-----------
| 项目 C |
|------------------------------------------------
| 一个相当长的菜单项在这里 |
 ----------------------------------

如果我将 [li] 或 [a] 标签设置为 display:block，它们会拉伸以填充最大可能宽度。我希望它们都具有相同的宽度，该宽度由最宽的项目动态确定，而不是通过手动在 [ul] 标签上放置宽度。

哦，目标是IE6。:)

更新：

width:1px, overflow:visible没用。（获得与没有显示相同的压扁效果：阻塞锚点。）

这是针对以 IE6 为目标的 Intranet，所以我被困在那里。（在其他项目中，我已经不再担心它了。）JS 是必需的，所以也许我会使用它。（不过，我总是讨厌这样做。）

4

4 回答 4

6

这非常简单：

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

这里的技巧是浮动 <ul> 和添加空格的组合： nowrap; 到被阻塞的锚点。事实上，除非你的 <ul> 正在争夺空间，否则你甚至不需要“nowrap”。至于忽略 12% 的访客的建议……嗯……

于 2008-11-19T02:00:07.800 回答
1

你唯一的选择是javascript。

顺便说一句，我的一个网站被大量家庭用户访问。我们已经看到 IE6 占我们流量的 12%。两个月前是20%。而整体 IE 流量保持在 76%

我的观点是，您可能不应该再担心 IE6 的怪癖了。

于 2008-11-18T21:39:10.713 回答
1

一定数量的黑客使它在 IE6 中工作，因为 width:auto 从来没有真正正常工作。

我已经看到了一些使用 width:1px; 来解决这个问题的方法；溢出：可见；，在这种情况下可能会起作用，但最好在条件注释中执行，以免在“真实”浏览器中填充，或使用 holly hack 或类似方法。请注意，IE 6 在怪癖模式和标准模式下的处理方式可能不同，因此请了解您的文档类型。

顺便说一句，会将您的锚标记作为块放置，因此您可以获得一致的宽度鼠标目标。

于 2008-11-18T21:42:37.133 回答
1

要使用纯 CSS 但宽度不均匀的 ul 在ul中获得收缩包装的li ，请尝试：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

（然后可能会调整具有固定行高和重复背景图像的人造列来设置li元素的样式）

如果您确定它是仅限 IE 的，那么 JavaScript 可以内置到 CSS 中，并使用动态属性来设置子宽度以匹配父级：

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}
于 2008-11-18T22:13:10.987 回答