为了捕获用户地址,我有以下字段:
如果我尝试添加另一个输入
<td class="nameAddress2">
<input class="inputStylized" type="text" id="namAddress-1" value="Name of the address" />
</td>
然后字段之间的空间消失,按钮也消失了..
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;
}
请记住,我还需要添加国家、城市和邮政编码,因此不确定所有内容是否都适合水平放置。