Form Alignment CSS

Question

這是我在開發中非常討厭的一種形式。以下是我的代碼，我正在嘗試將輸入與標籤Name: input對齊。編碼表單時，是否有規則用於幫助記憶？

CSS：

#newwebsiteForm form{ 
    padding:10px; 
    margin:10px 0; 
    width:480px; 
    position: relative; 
} 
#newwebsiteForm label{ 
    width:240px; 
    display:block; 
    float:right; 
} 
#newwebsiteForm input{ 
    width:240px; 
    display:block; 
    float:left; 
} 

HTML：

<section id="content"> 
       <h1>Free Quote</h1> 
        <p>Please fill out the below questionnaire to receive your free web development quote</p> 
         <form action="" method="post" accept-charset="utf-8"> 
          <select name="requiredOption" id="requiredOption"> 
           <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option> 
           <option id="newwebsite" value="newwebsite">New Website</option> 
           <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option> 
           <option id="other" value="other">Other</option> 
          </select> 
         </form> 
         <div id="newwebsiteSection"> 
          <form action="" id="newwebsiteForm" method="get" accept-charset="utf-8"> 
          <fieldset> 
          <label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input> 

          <label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input> 

          <label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input> 

          <label>What is your Domain?</label> 
          <input type="url" name="domain" value="http://example.com"></input></div> 

          <label>Type of site Required?<label> 

           <select name="newwebsiteType" id="newwebsiteType"> 
           <option value="shoppingCart">Shopping Cart</option> 
           <option value="CMS">Content Management System</option> 
           <option value="static">Static Website</option> 
           <option value="otherDevelopment">Other Development</option> 
          </select> 

          <label>Do You Require A Design?</label> 
          <input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input> 

          <label>Three Favorite colors?</label> 
           <input name="color1" value=""></input> 
           <input name="color2" value=""></input> 
           <input name="color3" value=""></input> 

           <label>What are your favorite websites?</label> 
           <input type="text" name="fav1" value=""></input> 
           <input type="text" name="fav2" value=""></input> 
           <input type="text" name="fav3" value=""></input> 

          <label>Comments?</label> 
          <textarea name="comments" id="comments"></textarea> 

          <input type="submit" name="submit" value="Send Quote Request"> 
          </form> 
         </div> 
          <div id="websiteredevelopmentSection"> 
           <p>Website Redevelopment</p> 
          </div> 
           <div id="otherSection"> 
            <p>Other</p> 
           </div> 

    </section> 

Answer 1

這可能與以下問題有關：<div> usage correctly? Can't get the columns to line up：在處理語義正確的表單時，您還可以查看我的註釋以獲得一些參考。

你將需要在習慣是總是結構中的標記正確跳轉到任何CSS （或造型）之前，首先這種方法。

甲<form>由以下組成：

1. 的<form>本身。
2. 的<fieldset>：行爲你<form>
3. 的<legend>不同部分的容器：充當的<fieldset>
4. 的<input />標題：有關字段，複選框，單選按鈕，並提交按鈕
5. <button>：<input type="submit">的替代方案，它可以將 包含在其中。
6. <select>：下拉菜單中的值列表。
7. 的<label>：從名字本身的<input />，<button>和<select>

爲了說明標籤，你可以檢查這個例子：

<form> 
    <fieldset> 
     <legend>Form Heading: </legend> 
     <fieldset> 
      <legend>Group 1 Heading: </legend> 
      <label for="input-id">Input Label: </label> 
      <input id="input-id" /> 
     </fieldset> 

     <fieldset> 
      <legend>Group 2 Heading: </legend> 
      <label for="select-id">Select Label: </label> 
      <select id="select-id"> 
       <option>Option 1</option> 
       <option>Option 2</option> 
       <option>Option 3</option> 
      </select> 
     </fieldset> 

     <input type="submit" value="Submit" /> 
    </fieldset> 
</form> 

隨着無線電除外（<input type="radio" />）和複選框（<input type="checkbox" />），其中<label>應該來後<input />

Answer 2

你有如下正確地調整他們使用的標籤元素：

<FORM action="http://somesite.com/prog/adduser" method="post"> 
<P> 
<LABEL for="firstname">First name: </LABEL> 
      <INPUT type="text" id="firstname"><BR> 
<LABEL for="lastname">Last name: </LABEL> 
      <INPUT type="text" id="lastname"><BR> 
<LABEL for="email">email: </LABEL> 
      <INPUT type="text" id="email"><BR> 
<INPUT type="radio" name="sex" value="Male"> Male<BR> 
<INPUT type="radio" name="sex" value="Female"> Female<BR> 
<INPUT type="submit" value="Send"> <INPUT type="reset"> 
</P> 

Answer 3

我包裝每個輸入/標籤對在<div>。這對樣式很有幫助。

<div class="form-item"> 
    <label for="first_name">First Name</label> 
    <input type="text" name="first_name" id="first_name" /> 
</div> 

Answer 4

只是因爲表是更容易的選項並沒有使它們正確。

這是一篇關於css表單設計的文章。 http://www.alistapart.com/articles/prettyaccessibleforms

作者建議將每個標籤/輸入元素存儲在一個有序列表元素中，以保持它們的分組。

我剛剛使用這個來實現一堆形式爲各種迷你網站，它工作的一種享受！ 只需將olli標籤元素的display屬性從display：inline-block分別更改爲display：block，就可以將輸入或輸入旁邊的標籤對齊。

使文本在單選按鈕或複選框旁邊對齊可能有點棘手，但可以通過添加和設置span元素來設置樣式。

最好的所有它的交叉瀏覽器兼容！

希望有所幫助。