2

使用 3 级深度的嵌套 UL 制作树形菜单。默认情况下，底部 2 个级别是隐藏/折叠的。底部的第 3 级显示了“左”与“右”值的比较。我想让所有的“左”跨度相同，但不是固定宽度。我考虑了一个 jquery 循环来查找所有此类跨度的最大宽度，然后返回并将它们全部设置为该最大宽度。但是当隐藏时，jquery width() 总是 0。所以我必须先展开整个列表，做这个工作，然后再次折叠它。即使那样，通过 jquery 设置宽度似乎也没有做任何事情。跨度有一个 style="width: 93px;" 在它们中，但实际宽度没有改变。是否有任何 CSS2/3 方式来链接这些元素的宽度？还是更好的javascript方式？

<ul class="hidden">
  <li>
    <span class="left">cat</span>
    &hArr;
    <span class="right">dog</span>
  </li>
  <li>
    <span class="left">bird</span>
    &hArr;
    <span class="right">horse</span>
  </li>
  <li>
    <span class="left">some long text</span>
    &hArr;
    <span class="right">more long text</span>
  </li>
</ul>

span.left{text-align:right;}
ul.hidden{display:none;}
4

2 回答 2

2

您可以使用 CSS 属性显示为表格单元格（例如http://ajaxian.com/archives/display-table），但实际上，您描述的是语义上的表格。为什么不只使用表格标记？它没有被诅咒或任何东西。

于 2012-07-16T16:37:55.027 回答
1

我建议将 left spans 更改为 div 并将“left”类的宽度设置为： min-width:100px;例如，如果它需要更多空间，它将动态扩展超过 100px。更改标签的原因是因为跨度标签通常在您想要添加文本样式时很有用，但在您想要应用宽度、高度、边距、填充等时却不是很有用......这就是我根据我的意见虽然经验。

编辑

可能的解决方案：为隐藏的ul设置一个边框并在其上使用min-width属性，整个列表的宽度将根据最大的列表项而变化。

于 2012-07-16T16:36:12.190 回答