这非常痛苦。我似乎无法排列我的div。我只想要左边有三列输入字段/描述。我试过这么多方法，我似乎无法让它发挥作用。
这是一个网站，如果它有所帮助，它是一个学生项目，我们一群人聚在一起，不幸的是我的任务是编程网站。
http://www.fsaesim.com/Products.html
我对CSS很新，但我有HTML经验。 Javascript文件还没有包含在内，但它最后一次上传它时起作用，忽略了那个部分。
<div class="body1">
<div class="main">
<br />
<!-- content -->
Tire Choice:
               <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>
      
Engine:                &nbs p     <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>
   
Torque Curve:      <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:           <input type="text" id="vehicleWeightTxt" value="530" size="3" />
                         
Number of NOS:          <input type="text" id="Text1" value="100" size="3" />
                                        
NOS Bottle #1:      <input type="text" id="Text2" value="3000" size="3" />
<br />
Wheel Base:                <input type="text" id="wheelBaseTxt" value="61" size="3" />
                        
NOS Bottle #2:            <input type="text" id="Text3" value="3000" size="3" />
                                        
NOS Bottle #3:      <input type="text" id="Text4" value="3000" size="3" />
<br />
Wheel Radius:             <input type="text" id="wheelRadiusTxt" value="10.25" size="3" />
                        
NOS Bottle #4:            <input type="text" id="Text5" value="3000" size="3" />
                                        
NOS Bottle #5:      <input type="text" id="Text6" value="3000" size="3" />
<br />
Track Width:               <input type="text" id="trackWidthTxt" value="50" size="3" />
                        
NOS Bottle #6:            <input type="text" id="Text7" value="3000" size="3" />
                                        
NOS Bottle #7:      <input type="text" id="Text8" value="3000" size="3" />
<br />
Center of Gravity:       <input type="text" id="hcgTxt" value="12" size="3" />
                        
NOS Bottle #8:            <input type="text" id="Text9" value="3000" size="3" />
                                        
NOS Bottle #9:      <input type="text" id="Text10" value="3000" size="3" />
<br />
Weight Distribution:    <input type="text" id="weightDistributionTxt" value="0.50" size="3" />
                        
NOS Bottle #10:          <input type="text" id="Text11" value="3000" size="3" />
                                        
NOS Bottle #11:    <input type="text" id="Text12" value="3000" size="3" />
<br />
Shift RPM:                   <input type="text" id="shiftRpmTxt" value="9500" size="3" />
                        
NOS Bottle #12:          <input type="text" id="Text13" value="3000" size="3" />
                                        
NOS Bottle #13:    <input type="text" id="Text14" value="3000" size="3" />
<br />
Final Drive Ratio:        <input type="text" id="ntTxt" value="2.86" size="3" />
                        
NOS Bottle #14:          <input type="text" id="Text15" value="3000" size="3" />
                                        
NOS Bottle #15:    <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>
答案 0 :(得分：3)
您无法使用 可靠地排列文本。您可以使用浮点数创建列，并使用类似的技术将标签与选择对齐 - 您只需要为标签应用一致的宽度。
首先重构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的目标钩子。
然后浮动你的标签并给它们一个明确的宽度，例如
label { float: left; width: 10em; }
这将 - 或多或少 - 将所有内容排成一列。这不是全部 - 根据您的要求，您可能希望使其更加健壮以处理不同的字体大小等 - 但这是一个良好的开端。
答案 1 :(得分：1)
这将永远不会像你尝试的那样工作。在改变字体宽度和浏览器之间的非破坏空间的渲染之间，它只是一种失败的技术。
话虽如此，这可以很容易地被视为表格数据，因此完全适合使用表格和行。单元格会自然排列，或者您可以使用一排垫片来设置列宽，旧式样。
这绝对可以用div或者只是样式元素来完成，但是我会在这里使用表格和行。
答案 2 :(得分：0)
<强> 1。你应该使用＆lt; br /＆gt;微
- 利用适当的元素，然后将它们与CSS组合以形成换行符（在这种情况下：＆lt; label＆gt; with CSS：（display：block））
<强> 2。避免使用任何标记设置网页样式：
- 而不是使用＆amp; nbsp; （HTML实体），您可以使用CSS'定位（浮点或位置）和间距（填充或边距）属性。
第3。避免使用已弃用的元素：
- ＆lt; center＆gt;是一个不推荐使用的元素，因为它本质上是表示性的，而是使用CSS代替:( text-align：center）。
<强> 4。练习为表单元素放置标题以告诉用户元素的用途：
- 您可以选择＆lt; label＆gt;或者直接在表单元素中放置title属性：
示例：
A：
＆lt; label for =“selection-id”＆gt;项目价格：＆lt; / label＆gt;
＆lt; input id =“selection-id”type =“text”/＆gt;
B：
＆lt; input type =“text”title =“Item Price”/＆gt;
<强> 5。不，这不是表格数据，因为：
你在视觉上设置它的方式：对齐'似乎'彼此不相关（每行从左到右看）
它看起来更像是一个列表'因为轮胎选择似乎'与车辆重量相关，直到最终传动比。
＆lt; select＆gt;和＆lt;输入＆gt;是＆lt; form＆gt;的元素而不是＆lt; table＆gt;（除非你想把表格放在表格内）