ユーザーのアドレスをキャプチャするために、以下のフィールドがあります。
別の入力を追加しようとすると
<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;
}
国、都市、郵便番号も追加する必要があるため、すべてが水平に収まるかどうかわからないことを覚えておいてください.