CSS表單對齊問題

我正在使用JSP設計一個html表單。以下是我的css文件 -CSS表單對齊問題

body { 
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, 
     Helvetica, sans-serif; 
    font-size: 12px; 
} 

p,h1,form,button { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

.spacer { 
    clear: both; 
    height: 1px; 
} 
/* ----------- My Form ----------- */ 
.myform { 
    margin: 0 auto; 
    width: 400px; 
    padding: 14px; 
} 

/* ----------- stylized ----------- */ 
#stylized { 
    border: solid 2px #b7ddf2; 
    background: #ebf4fb; 
} 

#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 { 
    float: left; 
    font-size: 12px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 200px; 
    margin: 2px 0 20px 10px; 
    height: 30px; 
} 

#stylized checkbox { 
    float: left; 
    font-size: 12px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 10px; 
    margin: 2px 0 20px 10px; 
} 

#stylized select { 
    float: left; 
    font-size: 12px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 250px; 
    margin: 2px 0 20px 10px; 
    height: 100px; 
} 

#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: 14px; 
    font-weight: bold; 
}

下面是我使用JSP構建的表單。

<div id="stylized" class="myform"> 

     <form:form id="form" name="form" method="POST" action="/showResponse"> 
      <h1>Service call Form</h1> 
      <p></p> 

      <form:label path="userId">User Id 
       <span class="small">Enter User Id</span> 
      </form:label> 
      <form:input name="name" id="name" path="userId" /> 

      <form:label path="debugFlag">Debug Flag : 
       <span class="small">Select Debug Flag</span> 
      </form:label> 
      <form:checkbox path="debugFlag" name="name" id="name" /> 


      <form:label path="attributeNames">Attribute Names : 
       <span class="small">Select Attribute Names</span> 
      </form:label> 
      <form:select path="attributeNames" items="${attributeNamesList}" 
       multiple="true" name="name" id="name" /> 

      <form:label path="machineName">Machine Name 
       <span class="small">Enter Machine Name</span> 
      </form:label> 
      <form:input name="name" id="name" path="machineName" /> 

      <form:label path="portNumber">Port Number 
       <span class="small">Enter Port Number</span> 
      </form:label> 
      <form:input path="portNumber" name="name" id="name" /> 


      <button type="submit">Submit</button> 
      <div class="spacer"></div> 

     </form:form> 
    </div>

我面臨的唯一問題是，它沒有正確對齊它的標籤和相應的輸入。下面是

enter image description here

只有用戶ID和調試標誌正確分配screenshot-。除此之外，它以某種方式搞砸了。任何人都可以告訴我我在CSS中做了什麼錯誤？

實際HTML代碼做源 -

<html> 
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="layout" content="main" /> 
    <title>Sample App</title> 
</head><body><div id="stylized" class="myform"> 

     <form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1> 
      <p></p> 

      <label for="userId">User Id 
       <span class="small">Enter User Id</span> 
      </label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div> 

      <label for="debugFlag">Debug Flag 
       <span class="small">Select Debug Flag</span> 
      </label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div> 

      <label for="attributeNames">Attribute Names 
       <span class="small">Select Attribute Names</span> 
      </label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div> 

      <label for="machineName">Machine Name 
       <span class="small">Enter Machine Name</span> 
      </label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div> 

      <label for="portNumber">Port Number 
       <span class="small">Enter Port Number</span> 
      </label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div> 

      <button type="submit">Submit</button> 
      <div class="spacer"></div> 

     </form></div> 
</body></html>

來源

2013-01-22 ferhan

您將所有輸入的寬度設置爲相同。您肯定不需要複選框上的寬度爲200像素。

將不同的類名稱放在不同的輸入類型上，並分別對它們進行樣式設置。

您可能還想將表單封裝在一個無序列表中，以允許它控制間距並清除浮點數。

<fieldset> 
    <legend>Delivery Details</legend> 
    <ol> 
    <li> 
     <label for="name">Name<em>*</em></label> 
     <input id="name" /> 
    </li> 
    <li> 
     <label for="address1">Address<em>*</em></label> 
     <input id="address1" /> 
    </li> 
    <li> 
     <label for="address2">Address 2</label> 
     <input id="address2" /> 
    </li> 
    <li> 
     <label for="town-city">Town/City</label> 
     <input id="town-city" /> 
    </li> 
    <li> 
     <label for="county">County<em>*</em></label> 
     <input id="county" /> 
    </li> 
...

這是一個很好的引導作用：http://www.alistapart.com/articles/prettyaccessibleforms/

來源

2013-01-22 22:10:01