css li菜单动态线宽在IE6中

Question

我有一个像这样的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>

我想创建这个:

|-----------------------------------|
| Item1                             |
|-----------------------------------|
| Item Two                          |
|-----------------------------------|
| Item C                            |
|-----------------------------------|
| A Rather Long Menu Item Down Here |
|-----------------------------------|

但是我得到了这个:

 -------- 
| Item1 |
|----------- 
| Item Two |
|-----------
| Item C |
|----------------------------------- 
| A Rather Long Menu Item Down Here |
 ----------------------------------- 

如果我设置[li]或[a]标签来显示:block,它们会拉伸以填充最大可能宽度.我希望它们都具有相同的宽度,这是由最宽的项目动态确定的,而不是手动在[ul]标签上放置宽度.

哦,目标是IE6.:)

更新:

width:1px, overflow:visible没用.(获得与没有显示器相同的压扁效果:阻塞的锚点.)

这是针对IE6是目标的内部网,所以我被困在那里.(在其他项目中,我已经不再担心了.)JS是一个要求,所以也许我会用它.(不过我总是讨厌这样做.)

Answer 1

这非常简单:

<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>并添加white-space:nowrap; 堵塞的锚点.事实上,除非你的<ul>争夺空间,否则你甚至不需要"nowrap".至于忽略12%访客的建议......好吧......