javascript - 如何在一行中保持 float 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%。第一个中的 ul 元素的宽度为父元素的 50%，并保持 float 。这种模式适用于二叉树的其余部分。

现在所有这些都很好地工作，直到列表中的元素超过父元素的宽度。然后两个宽度为 50% 的 float 元素显示在彼此下方，而不是彼此相邻。

有没有办法确保宽度为 50% 的元素始终彼此相邻？因此，我认为窗口需要可滚动。这对我来说很好。我 woudl 更喜欢纯 css 解决方案，但如果没有办法解决它，我也很乐意使用 JavaScript 或 Jquery。谢谢

Answer 1

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

您也可以使用 justify-content: space-between/space-around/etc 根据需要将它们并排放置。

如果您想了解有关 flex 的更多信息，这是一个很好的资源: http://flexboxfroggy.com/ (看似荒谬，但非常有帮助!)