對齊字段集中的文本輸入與css

Question

我想對齊字段集中的文本框..沒有我做似乎工作！ 當我跑步時的CSS文件，無論我做什麼，文本框會在不同的地方開始 HTML文件：

fieldset {padding: 1em; 
 
       padding-bottom:2em; 
 
       padding-left:2em; 
 
       border-width:5px; 
 
       color:black; 
 
       border-color:green; 
 
       border-radius:5px; 
 
       width:auto; 
 
       text-align:left; 
 
    
 
    } 
 
    legend {background-color:rgba(228, 200, 200, 0.78); 
 
       color:black; 
 
       opacity:0.6; 
 
       border: 1px solid thin; 
 
       padding: 10px 20px; 
 
       text-align:left; 
 
       border-radius:5px; 
 
    } 
 
    label { 
 
     width:50%; 
 
     margin-right: 0.5em; 
 
     padding-top: 0.2em; 
 
     padding-bottom:2em; 
 
     text-align: left; 
 
     font-weight: bold; 
 
    
 
    } 
 
    input{display:inline-block;}

 <fieldset> 
 
     <legend>About Yourself</legend> 
 
     <label> 
 
      <span calss="title">Gender</span> 
 
      <input id="female" type="radio" name="gender" value="F" /> 
 
      <label for="female">Female</label> 
 
      <input id="Male" type="radio" name="gender" value="M" /> 
 
      <label for="Male">Male</label> 
 
     </label> 
 
     <br /> 
 
     <label> 
 
      First Name 
 
      <input type="text" name="First Name" size="30" maxlength="40" /> 
 
     </label> 
 
     <br /> 
 
     <label> 
 
      Last Name 
 
      <input type="text" name="Last Name" size="30" maxlength="40" /> 
 
     </label> 
 
     <br /> 
 
     <label> 
 
      Date of Birth 
 
      <input type="date" name"DOB" /> 
 
     </label> 
 
     <br /> 
 
     <label> 
 
      Cell Phone Number (No Dashes) 
 
      <input type="text" name="Last Name" size="10" maxlength="10" /> 
 
     </label> 
 
     <br /> 
 
     <label> 
 
      Email Adrress 
 
      <input type="email" name="email" size="30" maxlength="50" /> 
 
     </label> 
 
     <br /> 
 
    </fieldset>

Answer 1

固定寬度並添加clear:both後代碼變得

fieldset > label { 
 
     float: left; 
 
     width: 200px; 
 
    } 
 
    fieldset { 
 
     border-width: 5px; 
 
     color: black; 
 
     border-color: green; 
 
     border-radius: 5px; 
 
    } 
 
    legend { 
 
     background-color: rgba(228, 200, 200, 0.78); 
 
     color: black; 
 
     opacity: 0.6; 
 
     border: 1px solid thin; 
 
     padding: 10px 20px; 
 
     border-radius: 5px; 
 
    } 
 
    label { 
 
     clear: both; 
 
     font-weight: bold; 
 
     padding: 5px; 
 
    }

<fieldset> 
 
    <legend>About Yourself</legend> 
 
    <label> 
 
    <span calss="title">Gender</span> 
 
    <input id="female" type="radio" name="gender" value="F" /> 
 
    <label for="female">Female</label> 
 
    <input id="Male" type="radio" name="gender" value="M" /> 
 
    <label for="Male">Male</label> 
 
    </label> 
 
    <br /> 
 
    <label> 
 
    First Name 
 
    <input type="text" name="First Name" size="30" maxlength="40" /> 
 
    </label> 
 
    <br /> 
 
    <label> 
 
    Last Name 
 
    <input type="text" name="Last Name" size="30" maxlength="40" /> 
 
    </label> 
 
    <br /> 
 
    <label> 
 
    Date of Birth 
 
    <input type="date" name "DOB" /> 
 
    </label> 
 
    <br /> 
 
    <label> 
 
    Cell Phone Number (No Dashes) 
 
    <input type="text" name="Last Name" size="10" maxlength="10" /> 
 
    </label> 
 
    <br /> 
 
    <label> 
 
    Email Adrress 
 
    <input type="email" name="email" size="30" maxlength="50" /> 
 
    </label> 
 
    <br /> 
 
</fieldset>