對齊輸入和單選按鈕

Question

我有這樣的代碼：

<form action="#" method="get"> 
     <fieldset> 
      <div> 
       <label for="profilephoto">Your profile photo</label> 
       <input type="file" name="profilephoto" id="profilephoto" /> 
      </div> 
      <div> 
       <label for="firstname">Your first name</label> 
       <input type="text" name="firstname" id="firstname" /> 
      </div> 
      <div> 
       <label for="lastname">Your last name</label> 
       <input type="text" name="lastname" id="lastname" /> 
      </div> 
      <div> 
       <label for="gender">Gender</label> 
       <input type="radio" name="gender" value="female" id="female" /> 
       <label for="female">Female</label> 
       <input type="radio" name="gender" value="male" id="male" /> 
       <label for="male">Male</label> 
      </div> 
      <div> 
       <label for="birthdategroup">Birth Date</label> 
       <select name="Month"> 
        <option value="none">- Month -</option> 
        <option value="January">January</option> 
        <option value="February">February</option> 
        <option value="March">March</option> 
        <option value="April">April</option> 
        <option value="May">May</option> 
        <option value="June">June</option> 
        <option value="July">July</option> 
        <option value="August">August</option> 
        <option value="September">September</option> 
        <option value="October">October</option> 
        <option value="November">November</option> 
        <option value="December">December</option> 
       </select> 
        <select name="Day"> 
        <option value="none">- Day -</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
        <option value="9">9</option> 
        <option value="10">10</option> 
        <option value="11">11</option> 
        <option value="12">12</option> 
        <option value="13">13</option> 
        <option value="14">14</option> 
        <option value="15">15</option> 
        <option value="16">16</option> 
        <option value="17">17</option> 
        <option value="18">18</option> 
        <option value="19">19</option> 
        <option value="20">20</option> 
        <option value="21">21</option> 
        <option value="22">22</option> 
        <option value="23">23</option> 
        <option value="24">24</option> 
        <option value="25">25</option> 
        <option value="26">26</option> 
        <option value="27">27</option> 
        <option value="28">28</option> 
        <option value="29">29</option> 
        <option value="22">30</option> 
        <option value="29">31</option> 

       </select> 
       <select name="year"> 
        <option value="none">- Year -</option> 
        <option value="1993">1993</option> 
        <option value="1994">1994</option> 
        <option value="1995">1995</option> 
       </select> 
       <p>This is hidden by fault from your profile.</p> 
      </div> 
      <div> 
       <label for="about">About you</label> 
       <textarea id="about" rows="9" cols="30"></textarea> 
      </div> 
      <div> 
       <label for="websiteaddress">Your website address 
       </label> 
       <input type="text" id="websiteaddress" name="websiteaddress" /> 
      </div> 
      <div> 
       <label for="websitename">Website name</label> 
       <input type="text" id="websitename" name="websitename" /> 
      </div> 
      <div> 
       <span>preview profile</span> <input type="submit" value="save"/> 
      </div> 


     </fieldset> 
    </form> 

和所需的設計是這樣的： http://d.pr/i/WZ0U

的問題是，我試圖通過添加填充到對準此和標籤的寬度，但由於單選按鈕有自己的標籤（男性和女性），它也增加了這些按鈕之間的空間，這是不希望的。

我該怎麼樣？ 另外，由於每個單選按鈕都有自己的標籤，因此是否將第三個標籤用於「性別」非常合適？

Answer 1

給「奇數」標籤一個類別名稱並單獨設計它。

此外，使用一個風格無序列表作爲一個容器比DIVs更好的形式。

參見：http://www.alistapart.com/articles/prettyaccessibleforms

Answer 2

添加類的標籤，例如，如果單選按鈕標籤需要不同的造型，然後其他標籤的特定類添加到這些標籤：

<label class="radio">text</label> 
<label class="input">text</label> 
... 

然後使用類在CSS而不是

label {css code} 

：使用

.radio {css code} 

等等，所以你可以給不同的CSS不同的標籤。