浮动表格项目左右？
问题
我有几个表格项目，我想向左或向右浮动。然而，我似乎无法让他们按照他们的说法去做（可能是因为我没有正确地告诉他们）。
所以我有两套表单项
- 关于汽车的信息----应该都在左边
- 有关人的信息 - 应该都在右边
目前的情况
你可以看到是否一团糟！
我尝试过的解决方案
内联浮动每个项目左或右
即
<div style="float:left">
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
<option value="1.6 Litre">1.6 Litre</option>
<option value="1.2 Litre">1.2 Litre</option>
<option value="2.5 Litre">2.5 Litre</option>
<option value="3 Litre">3 Litre</option>
<option value="4+ Litre">4+ Litre</option>
</select>
</div>
然而，这种方法并不适用于工作，因为“模型”仍然在右侧以及“传输”。
完整代码
CSS
/* ----------- My Form ----------- */
.form1{
float:left;
margin:0 auto;
width:900px;
height:500px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
/*border:solid 2px #b7ddf2;*/
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
/*border-bottom:solid 1px #b7ddf2;*/
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input, select, checkbox, radio{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
HTML
<div id="stylized" class="form1">
<form id="form1" method="POST" action="">
<div style="float:left">
<label>Make<span class="small">Choose the make.</span></label>
<select id="make" name="make" required autofocus style="float:left">
<option value="Default"></option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Aston Martin"> Aston Martin</option>
<option value="Audi"> Audi</option>
<option value="Bentley"> Bentley</option>
<option value="BMW">BMW</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari </option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai </option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia" >Kia</option>
<option value="Lamborghini">Lamborghini </option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lotus">Lotus </option>
<option value="Maserati">Maserati </option>
<option value="Mazda"> Mazda</option>
<option value="Mercedes-Benz">Mercedes-Benz </option>
<option value="MG">MG </option>
<option value="Mini">Mini </option>
<option value="Mitsubishi">Mitsubishi </option>
<option value="Nissan">Nissan </option>
<option value="Noble">Noble </option>
<option value="Peugeot">Peugeot </option>
<option value="Porsche">Porsche </option>
<option value="Renault">Renault</option>
<option value="Rolls Royce"> Rolls Royce</option>
<option value="Rover">Rover</option>
<option value="Saab">Saab </option>
<option value="Seat">Seat </option>
<option value="Skoda">Skoda </option>
<option value="Smart" >Smart</option>
<option value="Subaru">Subaru </option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota"> Toyota</option>
<option value="TVR">TVR </option>
<option value="Vauxhall"> Vauxhall</option>
<option value="Volvo">Volvo </option>
<option value="Volkswagen">Volkswagen</option>
<option value="Other">Other</option>
</select>
</div>
<div style="float:right">
<label>Name<span class="required">*</span><span class="small">Add your name</span> </label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
</div>
<div style="float:left">
<label>Model<span class="required">*</span><span class="small">Add the model</span></label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
</div>
<div style="float: left; ">
<label>Body Type<span class="small">Add body type</span></label>
<select id="body-type" name="body-type" style="float:left">
<option value="Hatchback">Hatchback</option>
<option value="Saloon">Saloon</option>
<option value="Estate">Estate</option>
<option value="Sports">Sports</option>
<option value="Convertable">Convertable</option>
<option value="Sports Utility Vehicle">Sports Utility Vehicle</option>
<option value="Other">Other</option>
</select>
</div>
<div style="float: right;">
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe@example.com" required />
</div>
<div style="float: left;">
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
</div>
<div style="float:right">
<label>Telephone<span class="small">Add your Tel Number</span></label>
<input type="tel" id="telephone" name="telephone" placeholder="UK Telephone Number" input size="10" />
</div>
<div style="float:left">
<label>Color<span class="small">Choose you colour</span></label>
<input type="color" id="colour" name="colour" style="height:15px; width" required/>
</div>
<div style="float:right">
<label>Message<span class="required">*</span><span class="small">Additional Info</span></label>
<textarea id="message" stname="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea>
</div>
<div style="float:left">
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
<option value="1.6 Litre">1.6 Litre</option>
<option value="1.2 Litre">1.2 Litre</option>
<option value="2.5 Litre">2.5 Litre</option>
<option value="3 Litre">3 Litre</option>
<option value="4+ Litre">4+ Litre</option>
</select>
</div>
<div style="float:left">
<label>Doors<span class="small">Number of Doors</span></label>
<select id="doors" name="doors">
<option value="3">3</option>
<option value="4">4</option>
<option value="5+">5+</option>
</select>
</div>
<div style="float:left">
<label>Age<span class="small">Age</span></label>
<select id="age" name="age">
<option value="Less than 1 Year">Less than 1 Year</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="5+">5+</option>
</select>
</div>
<div style="float:left">
<label>Fuel<span class="small">Fuel Type</span> </label>
<select id="fuel" name="fuel">
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="Electric">Electric</option>
<option value="Hybrid">Hybrid</option>
</select>
</div>
<div style="float:left">
<label>Milage<span class="small">Milage</span> </label>
<select id="milage" name="milage">
<option value="10,000 or Less">10,000 or Less</option>
<option value="75,000">75,000</option>
<option value="100,000">100,000</option>
<option value="150,000 or More">150,000 or More</option>
</select>
</div>
<div style="float:left">
<label>Max-Budget<span class="required">*</span><span class="small">Select your maximum budget limit</span></label>
<input type="text" id="max-price" name="max-price" placeholder="Maximum Price of Car" style="height:15px;" required/>
</div>
<div style="float:left">
<label>Min-Budget<span class="required">*</span><span class="small">Select your minimum budget limit</span></label>
<input type="text" id="min-price" name="min-price" placeholder="Minimum Price of Car" style="height:15px;" required/>
<p id="req-field-desc"> </p>
</div>
<div style="float:left"> <span class="required">*</span> indicates a required field </div>
<div style="float:right">
<input type="submit" value="Find My Car!" id="submit-button" />
</div>
</form>
</div>
任何指向我需要做的事情，或者我错过的事情都会很棒！感谢
2 个答案:
答案 0 :(得分：2)
首先，不要使用内联样式。
其次，不是让每个字段向左然后向左然后向右，尝试将表格重新排列为2个字段集，左列字段集和右列字段集（左边是汽车的东西，右边是个人的东西）。这样，你只需要浮动2个东西，一个左边和一个右边。这些列中的字段可以堆叠。
注意 - 我还在表单的每个“部分”周围添加了<div class="form-group>，因此它们是块级别。
E.g。
<form>
<fieldset id="car-info">
<div class="form-group">
<label>Model<span class="required">*</span><span class="small">Add the model</span></label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
</div>
<div class="form-group">
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
</div>
</fieldset>
<fieldset id="personal-info">
<div class="form-group">
<label>Name<span class="required">*</span><span class="small">Add your name</span> </label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
</div>
<div class="form-group">
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe@example.com" required />
</div>
</fieldset>
</form>
CSS示例
#car-info {
float: left;
width: 50%;
}
#personal-info {
float: right;
width: 50%;
}
fieldset {
padding: 0;
border: 0;
margin: 0;
}
label {
display: block;
}
.form-group {
margin-bottom: 20px;
}
<强> Example
答案 1 :(得分：1)
相关的jsfiddle链接：http://jsfiddle.net/7V4jm/
尝试分离文件的职责。保留HTML中的内容和CSS中的样式（尽量避免使用HTML中的style属性）。
将汽车和人物元素从单个div中取出，并将它们放在car stuff div和people stuff div中：
1）汽车东西div
<div class="column"> <!-- Car stuff -->
<label>Make<span class="small">Choose the make.</span></label>
<select id="make" name="make" required autofocus style="float:left">
<option value="Default"></option>
</select>
<label>
Model<span class="required">*</span>
<span class="small">Add the model</span>
</label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
<label>Body Type<span class="small">Add body type</span></label>
<select id="body-type" name="body-type" style="float:left">
<option value="Hatchback">Hatchback</option>
</select>
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
<label>Color<span class="small">Choose you colour</span></label>
<input type="color" id="colour" name="colour" style="height:15px; width" required/>
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
</select>
<label>Doors<span class="small">Number of Doors</span></label>
<select id="doors" name="doors">
<option value="3">3</option>
</select>
<label>Fuel<span class="small">Fuel Type</span> </label>
<select id="fuel" name="fuel">
<option value="Petrol">Petrol</option>
</select>
<label>Milage<span class="small">Milage</span> </label>
<select id="milage" name="milage">
<option value="10,000 or Less">10,000 or Less</option>
</select>
</div> <!-- End car stuff -->
2）人们的东西div
<div class="column"> <!-- Person stuff -->
<label>
Name<span class="required">*</span>
<span class="small">Add your name</span>
</label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe@example.com" required />
<label>Telephone<span class="small">Add your Tel Number</span></label>
<input type="tel" id="telephone" name="telephone" placeholder="UK Telephone Number" input size="10" />
<label>Message<span class="required">*</span><span class="small">Additional Info</span></label>
<textarea id="message" stname="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea>
<label>Age<span class="small">Age</span></label>
<select id="age" name="age">
<option value="Less than 1 Year">Less than 1 Year</option>
</select>
<label>Max-Budget<span class="required">*</span><span class="small">Select your maximum budget limit</span></label>
<input type="text" id="max-price" name="max-price" placeholder="Maximum Price of Car" style="height:15px;" required/>
<label>Min-Budget<span class="required">*</span><span class="small">Select your minimum budget limit</span></label>
<input type="text" id="min-price" name="min-price" placeholder="Minimum Price of Car" style="height:15px;" required/>
<p id="req-field-desc"> </p><span class="required">*</span> indicates a required field
</div> <!-- End person stuff -->
然后使用以下样式向两个div添加column类：
/* ----------- Columns ----------- */
.column {
width: 45%; /* or whatever width you prefer */
float: left;
}
再次相关的jsfiddle链接：http://jsfiddle.net/7V4jm/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？