多行标签

Question

我正在努力解决HTMl / Css问题。我正在使用ul和li创建标签。选项卡列表是动态的，最多可扩展10个选项卡。问题是列表中断了100％宽度并且选项卡重叠。是否可以计算列表何时达到100％宽度，所以我可以创建第二组选项卡？

以下是示例的链接。

http://jsfiddle.net/syEJx/5/

标签8,9和10的上部文字被截断。我想避免那个

由于

Answer 1

CSS（没有Javascript的帮助）无法以这种方式计算尺寸，但如果您的li在没有高度限制且宽度恒定的ul内浮动，那么您的标签将从左到右，从上到下填充。另一个选项可能是设置你的ul样式：block和你要显示的li：inline。这可能会更好，因为ul将围绕li扩展。我认为这是你正在寻找的行为。

Answer 2

这个怎么样？

Live Demo

新的CSS：

.tabs li
{
    display: inline-block;
    margin: 0 0 15px 0;

    /* ie7 hacks */
    zoom:1;
    *display: inline;
    _height: 20px
}

它包括在IE7中使其工作可接受的必要技巧。如果您不关心IE7，请随意删除这三行。