css - 用法正确吗？无法让列对齐

Question

这很痛苦。我似乎无法排列我的 div。我只想要 3 列，左边有输入字段/描述。我已经尝试过很多方法，但我似乎无法让它发挥作用。

这就是网站，如果它有帮助的话，它是我们一群人聚在一起的学生元素，不幸的是，我的任务是对网站进行编程。

http://www.fsaesim.com/Products.html

我是 CSS 的新手，但我有 HTML 方面的经验。 Javascript 文件尚未包括在内，但它在我上次上传时有效，请忽略该部分。

    <div class="body1">
        <div class="main">
        <br />
<!-- content -->
    Tire Choice:
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp<select id="tireChoiceSel">
        <option value="1">Michelin 13"</option>
        <option value="2">Hoosier 13" Large</option>
        <option value="3">Hoosier 13" Small</option>
        <option value="4">Mexican Tires</option>
    </select>

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Engine:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbs  p&nbsp&nbsp&nbsp&nbsp&nbsp<select id="engineSelectionSel">
        <option value="1">Yamaha R6 - 4 Cylinder</option>
        <option value="2">Yamaha WR450 - 1 Cylinder</option>
        <option value="3">Honda CBR600RR - 4 Cylinder </option>
        <option value="4">Suzuki GSXR600 - 4 Cylinder</option>
    </select>

    &nbsp&nbsp&nbsp
    Torque Curve:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<select id="torqueCurveSel">
        <option value="1">Cornell Curve 2008</option>
        <option value="2">MIT Curve 2008</option>
        <option value="3">RMIT Curve 2008 </option>
        <option value="4">Fullerton Curve 2008</option>
    </select>



    <br />

    Vehicle Weight:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="vehicleWeightTxt" value="530" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Number of NOS:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text1" value="100" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #1:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text2" value="3000" size="3" />

    <br />
    Wheel Base: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp <input type="text" id="wheelBaseTxt" value="61" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #2:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text3" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #3:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text4" value="3000" size="3" />





    <br />
    Wheel Radius: &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp<input type="text" id="wheelRadiusTxt" value="10.25" size="3"  />


    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #4:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text5" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #5:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text6" value="3000" size="3" />



    <br />
    Track Width: &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="trackWidthTxt" value="50" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #6:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text7" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #7:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text8" value="3000" size="3" />


    <br />
    Center of Gravity: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="hcgTxt" value="12" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #8:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text9" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #9:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text10" value="3000" size="3" />



    <br />
    Weight Distribution: &nbsp&nbsp&nbsp<input type="text" id="weightDistributionTxt" value="0.50" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #10:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text11" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #11:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text12" value="3000" size="3" />

    <br />
    Shift RPM: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="shiftRpmTxt" value="9500" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #12:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text13" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #13:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text14" value="3000" size="3" />


    <br />
    Final Drive Ratio: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="ntTxt" value="2.86" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #14:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text15" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #15:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text16" value="3000" size="3" />
    <br />


    <br />
    <br />
    <br />




    <center><input type="submit" value="Calculate" onclick="ShowCalculation(); return false;" /></center>
        </div>
    </div>

Answer 1

您无法使用   可靠地排列文本。您可以使用 float 创建列，并使用类似的技术将标签与选择对齐 - 您只需要对标签应用一致的宽度。

首先重组您的 HTML:

<label for="tireChoiceSel">Tire Choice</label>
<select id="tireChoiceSel">
    <option value="1">Michelin 13"</option>
    <option value="2">Hoosier 13" Large</option>
    <option value="3">Hoosier 13" Small</option>
    <option value="4">Mexican Tires</option>
</select>

label 不仅是可访问性方面的良好实践，它还会为您提供使用 CSS 进行定位的 Hook 。

然后 float 你的标签并给它们一个明确的宽度，例如

label { float: left; width: 10em; }

这将 - 或多或少 - 把所有东西都排好。这不是全部 - 根据您的要求，您可能希望使其更强大以处理不同的字体大小等 - 但这是一个好的开始。