Question

我目前正在研究二叉树脚本。对于这个脚本，我使用以下html设置：

＆＃13;

 #tree_ul {
        left: 50%;
    }

    .tree li {
        float: left;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .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: 0;
    }

    .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;
    }

＆＃13;

<ul id='tree_ul'>
        <li>
            <a href='#'>Main Account</a>
                <ul id='main-account'>
                    <li>
                        <a href='#'>First Child</a>
                            <ul id='first-child-childs'>
                                <li>
                                    <a href='#'>Third Child</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                    <li>
                        <a href='#'>Second Child</a>
                            <ul id='first-child-childs'>
                                <li>
                                    <a href='#'>Third Child</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </a>
        </li>
    </ul>

＆＃13;

所以基本上第一个ul元素的宽度为页面的100％。第一个中的ul元素的宽度为父元素的50％，并保持浮动状态。这个模式继续用于二叉树的其余部分。

现在所有这一切都很有效，直到列表中的元素超过父元素的宽度。然后，宽度为50％的两个浮动元素将显示在彼此之下，而不是彼此相邻。

我有办法确保宽度为50％的元素总是彼此相邻吗？因此，我认为窗口需要可滚动。这对我很好。我不喜欢纯粹的css解决方案，但如果没有解决方法，我也很乐意使用JavaScript或Jquery。感谢

Answer 1

使用flex而不是百分比和浮点数。对于这种情况，您可以为两个内部元素设置此属性，如下所示：flex：1。由于它们具有相同的大小，因此它们应共享空间。这样你就不必指定大小。 https://www.w3schools.com/cssref/css3_pr_flex.asp

你也可以根据需要使用justify-content：space-between / space-around / etc将它们放在一起。

如果您想了解有关flex的更多信息，这是一个很好的资源： http://flexboxfroggy.com/（看起来很荒谬，但非常有帮助！）

如何在一行中保持浮动ul元素

1 个答案: