对齐输入和单选按钮

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不同的标签。