2013-04-09 24 views
2

用於捕捉用戶地址下面我有以下字段:如何佈局領域正確,添加額外的輸入打破了正確的格式

correct format

,如果我嘗試添加其他輸入

<td class="nameAddress2"> 
     <input class="inputStylized" type="text" id="namAddress-1" value="Name of the address" /> 
</td> 

然後領域之間的空間消失,也按鈕.. incorrect

HTML

<div id="user-address"> 
       <form class="settings-form" id="adrress-form" name="adrress-form"> 
        <h3>Change address <span>(lorem ipsum lorem #24)</span></h3> 
        <div class="data-field"> 
         <table id="address-table"> 
          <tr> 
           <td colspan="2"><h3>Addresses (Home/work)</h3></td> 
           <td colspan="3"><h3>Name of the address</h3></td> 
          </tr> 
          <tr class="item"> 
           <td class="num"> 
            <span>1</span> 
           </td> 
           <td class="addresses"> 
            <input class="inputStylized" type="text" id="addresses-1" value="Your new address" /> 
           </td> 
           <td class="nameAddress"> 
            <input class="inputStylized" type="text" id="namAddress-1" value="Name of the address" /> 

           </td> 

           <td class="nameAddress2"> 
            <input class="inputStylized" type="text" id="namAddress-1" value="Name of the address" /> 

           </td> 

           <td class="delete-field"> 
            <img class="remove" alt="delete" src="assets/img/x-green.png"> 
           </td> 
           <td class="choiseDefault isDefault"> 
            <span class="default">Default</span> 
            <span class="setDefault">Set as default</span> 
           </td> 
          </tr> 
          <tr class="item"> 
           <td class="num"> 
            <span>2</span> 
           </td> 
           <td class="addresses"> 
            <input class="inputStylized" type="text" id="addresses-2" value="Your new address" /> 
           </td> 
           <td class="nameAddress"> 
            <input class="inputStylized" type="text" id="namAddress-2" value="Name of the address" /> 

           </td> 
           <td class="delete-field"><img class="remove" alt="delete" src="assets/img/x-green.png"></td> 
           <td class="choiseDefault isNotDefault"> 
            <span class="default">Default</span> 
            <span class="setDefault">Set as default</span> 
           </td> 
          </tr> 
         </table> 
         <div id="addNewAddresses"> 
          <span>Add more addresses</span> 
         </div> 
        </div> 
       </form><!--/#address-form--> 
      </div> 

CSS

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address{ 
    clear:both; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form h3{ 
    color: #989898; 
    font-size: 16px; 
    margin-bottom: 16px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field input.inputStylized{ 
    background-color: #D1D1D1; 
    border: medium none; 
    color: #FFFFFF; 
    font-size: 13px; 
    padding: 12px 15px; 
    display:block; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td{ 
    vertical-align: middle; 
    padding-bottom: 15px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.num{ 
    width:29px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.num span{ 

    color:#989898; 
    font-size:32px; 
    font-weight: bold; 
    padding-top: 3px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.addresses{ 
    width:245px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.addresses input.inputStylized{ 
    width:180px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.nameAddress{ 
    width:201px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.nameAddress2{ 
    width:201px; 
} 


#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.delete-field{ 
    width:51px; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.delete-field img{ 
    cursor:pointer; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.choiseDefault span.default{ 
    font-size:15px; 
    font-weight: bold; 
    color:#FFF; 
    background: url("../img/boton-verde.png") no-repeat scroll center center transparent; 
    display:block; 
    width:115px; 
    padding-top: 10px; 
    height: 24px; 
    text-align: center; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.choiseDefault span.default{ 
    display:none; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.isDefault span.default{ 
    display:block !important; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.isDefault span.setDefault{ 
    display: none !important; 
} 

#wrap-main #main-settings .standar-container #settings-section #settings-info #user-address form .data-field table tr > td.choiseDefault span.setDefault{ 
    font-size:15px; 
    font-weight: bold; 
    color:#FFF; 
    background: url("../img/boton-plomo-corto.png") no-repeat scroll center center transparent; 
    display:block; 
    width:160px; 
    padding-top: 10px; 
    height: 24px; 
    text-align: center; 
    cursor:pointer; 
} 

請記住,我還需要添加國家,城市和郵政編碼,以便不知道一切都會以水平方向完全。

回答

0

風格你所有的輸入與CSS選擇器領域

#myForm input[type=text] { 
width: 
} 

如果有很多人,也許使用一個表,或者一類以轉移他們