< div>用法正确？无法获取列排列 [英] <div> usage correctly? Can't get the columns to line up
问题描述
这很痛苦。我似乎不能排队我的div。我只想要3列与输入字段/描述左边。我试图做这个很多方式，我只是不能似乎得到它的工作。
This is pretty painful. I can't seem to line up my div's. I just want 3 columns with input fields/description to the left. I have tried to do this many ways and I just can't seem to get it to work.
这是网站，如果它有帮助，一个学生项目，我们一起聚集在一起，我不幸的是编程的网站。
This is the website if it helps, its a student project that a bunch of us got together and I am tasked unfortunately with programming the website.
http://www.fsaesim.com/Products.html
我是CSS的新手，但我有HTML的经验。 Javascript文件不包括，但它的工作，我上次上传，忽略了那部分。
I'm fairly new to CSS but I have experience in HTML. The Javascript file isn't included just yet but it worked the last time I had it uploaded, disregard that part.
<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>
推荐答案
1。您应该使用< br />
- 使用适当的元素，然后将它们与CSS组合以形成换行符（在本例中：< label> with CSS：（display：block））
1. You should use <br /> sparingly:
- Utilize appropriate elements then combine them with CSS to form a line-break (in this case: <label> with CSS: (display: block))
2。避免使用任何标记为网页设计样式：
- 不使用& nbsp; （HTML实体），您可以使用CSS的定位（浮动或位置）和间距（填充或边距）属性。
2. Avoid styling the webpage using any markup:
- Instead of using (an HTML Entity), you can use CSS' positioning (float or position) and spacing (padding or margin) properties.
3。避免使用已弃用的元素：
- < center>是一个已弃用的元素，因为它在本质上是表现性的，使用CSS代替：（text-align：center）。
3. Avoid using deprecated elements:
- The <center> is a deprecated element because it is presentational in nature, use CSS instead: (text-align: center).
4。练习为表单元素放置标题，以告诉用户这些元素是什么：
- 您可以选择< label>或直接在表单元素中放置标题属性：
4. Practice placing title for form elements to tell the user what the elements are for:
- You can chooose between <label> or placing a title attribute directly in the form elements:
例如：
A：
< label for =selection-id>商品价格：< / label>
< input id =selection-idtype =text />
A:
<label for="selection-id">Item Price: </label>
<input id="selection-id" type="text" />
B：
< input type =texttitle =Item Price/>
B:
<input type="text" title="Item Price" />
5。不，它不是一个表格数据，因为：
-
视觉设置的方式： '不相互关联（每行从左到右的方向）
The way you visually set it: the alignment 'seems' to not relate on each other (See left to right direction per row)
它看起来更像一个列表，因为轮胎选择似乎是与车辆重量直到最终传动比。
It 'looks more like a list' because Tire Choice 'seems' to be related to Vehicle Weight until Final Drive Ratio.
< select>和< input>是< form>的元素。而不是< table>（除非您要将表单放在表格中）
The <select> and <input> are elements of <form> and not <table>'s (unless you want to place the form inside the table)
这篇关于< div>用法正确？无法获取列排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
