如何将漂浮的UL元素保持在一行中

Question

我当前正在处理二进制树脚本。对于此脚本，我使用以下HTML设置：

 #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;
    }

<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>
   

基本上，第一个UL元素的宽度为该页面的100％。第一个元素的元素的宽度为父母的50％，并被漂浮。二进制树的其余部分继续进行此模式。

现在，所有这些工作都很好，直到列表中的元素超过父元素的宽度为止。然后，宽度为50％的两个漂浮元素在彼此下方而不是彼此旁边显示。

有没有办法确保，宽度为50％的元素总是彼此相邻放置？结果，我认为窗口需要滚动。这对我很好。我更喜欢纯CSS解决方案，但是如果没有办法，我也很乐意用户JavaScript或jQuery。谢谢

Answer 1

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

您也可以使用Justify-content：space-bet-ween/space-around/etc。

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