html - 并排放置两个列表

Question

为什么这些不排队？我正在使用 Bootstrap 制作一个辅导网站，我正在尝试最大限度地利用网格系统，但我不想不必要地编写 JavaScript 函数来动态创建列表……这是创建两个列表的不正确方法吗并排列出？我以前的解决方案有一个接一个的列表，但我认为从用户体验的 Angular 来看，它们应该都立即可见，但出于某种原因，“科学”比“数学”低一厘米，我不明白为什么。

    <h2> MATHEMATICS </h2>
    <div id = "math_div">
        <ul style="width:10%; float:left;">
            <li>K-5 Math</li>
            <li>Middle School Math</li>
            <li>Algebra</li>
            <li>Plane Geometry</li>
            <li>Algebra 2</li>
            <li>Trigonometry</li>
            <li>Solid & Analytical Geometry</li>
            <li>Precalculus</li>
            <li>Calculus</li>
            <li> Advanced Specialties 
                <ul> 
                    <li>Symbolic Logic</li>
                    <li>Finite Math</li>
                    <li>Linear & Matrix Algebra</li>
                    <li>Multivariable Calculus (Analysis)</li>
                    <li>Differential Equations</li>
                    <li>Linear Programming (Finance)</li>
                </ul>
            </li>
        </ul>
    </div>

    <h2> SCIENCE </h2>
    <div id = "science_div">
        <ul style="width:10%; float:left;"> 
            <li>Chemistry</li>
            <li>Physics</li>
            <li>General Physical Science</li>
            <li> Advanced Specialties 
                <ul> 
                    <li>Nuclear Physics & Chemistry</li>
                    <li>Radiochemistry</li>
                    <li>Radiation Science</li>
                    <li>Measurement Theory</li>
                    <li>Uncertainty Treatments</li>
                </ul>
            </li>
            <li> Advanced Specialties 
                <ul> 
                    <li>Symbolic Logic</li>
                    <li>Finite Math</li>
                    <li>Linear & Matrix Algebra</li>
                    <li>Multivariable Calculus (Analysis)</li>
                    <li>Differential Equations</li>
                    <li>Linear Programming (Finance)</li>
                </ul>
            </li>
        </ul>
    </div>

Answer 1

我想说的是 html 的结构以及 float:left 可能应该在 div 而不是 ul 中(这就是导致第二个列表成为稍微低于另一个，因为它 float 在第一个标题下方)。

如果稍微更改一下代码，就会得到预期的行为:

<div id="math_div" style="float:left;">
     <h2> MATHEMATICS </h2>

    <ul style="width:10%;">
        <li>K-5 Math</li>
        <li>Middle School Math</li>
        <li>Algebra</li>
        <li>Plane Geometry</li>
        <li>Algebra 2</li>
        <li>Trigonometry</li>
        <li>Solid & Analytical Geometry</li>
        <li>Precalculus</li>
        <li>Calculus</li>
        <li>Advanced Specialties
            <ul>
                <li>Symbolic Logic</li>
                <li>Finite Math</li>
                <li>Linear & Matrix Algebra</li>
                <li>Multivariable Calculus (Analysis)</li>
                <li>Differential Equations</li>
                <li>Linear Programming (Finance)</li>
            </ul>
        </li>
    </ul>
</div>
<div id="science_div" style="float:left;">
     <h2> SCIENCE </h2>

    <ul style="width:10%;">
        <li>Chemistry</li>
        <li>Physics</li>
        <li>General Physical Science</li>
        <li>Advanced Specialties
            <ul>
                <li>Nuclear Physics & Chemistry</li>
                <li>Radiochemistry</li>
                <li>Radiation Science</li>
                <li>Measurement Theory</li>
                <li>Uncertainty Treatments</li>
            </ul>
        </li>
        <li>Advanced Specialties
            <ul>
                <li>Symbolic Logic</li>
                <li>Finite Math</li>
                <li>Linear & Matrix Algebra</li>
                <li>Multivariable Calculus (Analysis)</li>
                <li>Differential Equations</li>
                <li>Linear Programming (Finance)</li>
            </ul>
        </li>
    </ul>
</div>

正如您在此 Fiddle 中看到的那样.我不知道这是否适合你。