2

为了捕获用户地址,我有以下字段:

正确的格式

如果我尝试添加另一个输入

<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;
}

请记住,我还需要添加国家、城市和邮政编码,因此不确定所有内容是否都适合水平放置。

4

1 回答 1

0

使用 CSS 选择器设置所有输入字段的样式

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

如果他们很多,也许用一张桌子,或者一个班级来转移他们

于 2013-04-09T10:59:47.167 回答