並排放置兩個列表

Question

這些為什么不排隊呢？ 我正在使用Bootstrap制作補習網站，並且試圖最大限度地利用網格系統，但是我不想不必要地編寫JavaScript函數來動態創建列表...這是創建兩個列表的不正確方法嗎？並排列出？ 我以前的解決方案是一個接一個的列表，但我認為從UX角度來看，它們都應該立即可見，但是由於某種原因，“科學”比“數學”低一厘米，我不明白為什么。

    <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（這是導致第二個列表比另一個列表稍低的原因，因為它是浮動的在第一個標題下方）。

如果稍微更改代碼，則可以得到預期的行為：

<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中所看到的。 我不知道這是否適合您。