1. 首页
  2. 问答
  3. 左右浮动表单项？

左右浮动表单项？

2014-02-26 52 views
1

问题左右浮动表单项？

我有几个表单项目，我想漂浮左或右。然而，我似乎无法让他们按照他们的说法去做（可能因为我没有正确地告诉他们）。

所以我有两套形式项有关汽车

  1. 信息----都应该是关于人的离开
  2. 信息 - 都应该在右边

什么是目前看起来像

enter image description here

你可以看到如果一团糟！

我尝试的解决方案

内联浮每个项目向左或向右

即

<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>

但是这种方法并不entiry工作的“模式”仍在右侧以及“传输”。

完整代码

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="[email protected]" 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">&nbsp;</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>

任何指针我需要做什么，或者我缺少的东西会很棒！谢谢

来源

2014-02-26 Dan Cundy

+0

我不认为这是形式的“炫耀” ......至少在其当前状态。 – royhowie

+0

不，但希望它会！大声笑 –

回答

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="[email protected]" 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

来源

2014-02-26 01:14:41 davidpauljunior

+0

好的非常感谢您的建议，我会实施你现在所说的。 –

+0

非常好，非常感谢！ –

1

相关的jsfiddle链接：http://jsfiddle.net/7V4jm/

尝试分离文件的责任。保持HTML中的内容和CSS中的样式（尽量避免HTML中的style属性）。

坐的车和人的要素进行单独申报单，并放置在一个car stuff股利和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="[email protected]" 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">&nbsp;</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/

来源

2014-02-26 01:35:12

相关问题

 相关问题