html - 溢出 CSS 树

Question

如何在 ul/li CSS 树(例如 CSS3 Family Tree Example)中区分“没有孙子但有很多 child 的 parent ”？

最终目标是使树适合 8.5"x 11"并能够处理带有很长文本的 li。如果可以的话，我想坚持使用纯 CSS(我不是 100% 确定生产环境将允许 jQuery/JS/等)

这是我从上面的例子中得到的 CSS 代码，稍作修改:

    * {
        margin: 0;
        padding: 0;
    }

    .tree {
        white-space: nowrap;
    }

    .tree ul {
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li {
        float: none;
        display:inline-block;
        white-space: wrap;
        vertical-align:top;
        margin: 0 -2px 0 -2px;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
    width: auto;
    margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li span {
    }

    .tree li span.rotated {
        -ms-writing-mode: tb-rl; /* old syntax. IE */
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl; /* new syntax */
    }

    .tree li::before, .tree li::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid #ccc;
        width: 50%;
        height: 20px;
    }
    .tree li::after {
        right: auto;
        left: 50%;
        border-left: 1px solid #ccc;
    }

    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }

    .tree li:only-child {
        padding-top: 0px;
        float: none;
    }

    .tree li:first-child::before, .tree li:last-child::after {
        border: 0 none;
    }
    .tree li:last-child::before {
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }
    .tree li:first-child::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }

    .tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 20px;
    }

    .tree li span {
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;

        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

Answer 1

How do I distinguish "parents without grandchildren but with many children" in a ul/li CSS tree

答案是，你不能用纯 css...还。

目前 CSS 中没有 parent 选择器。 Here is a similar question, which links to several other similar questions . CSS4 可能会得到一个 "parent selector" .