1. 首頁
  2. 問答
  3. 左右浮動表單項？

左右浮動表單項？

2014-02-26 267 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

相關問題

 相關問題