Question

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

    <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中所看到的那样。我不知道这是否适合你。

将两个列表并排放置

1 个答案: