0

我正在尝试创建一个带有文本输入的表格，但在让文本框正确调整大小时遇到​​了一些问题。复制到现有项目时，文本框四周大 4 像素。这是一个独特的名称，但它仍在继承属性，我不知道如何避免这种情况。表格尺寸是正确的，而不是输入。

这是CSS

.medium_input{
    display: block;
    width:90%; 
    height:30px;
    font-size:12px;
    padding: 0;
    margin: 0;
}
.left_half {
    width: 49%;
    float: left;
}

.g_info_table {
    width:100%;
    margin-bottom: 0;
}

.g_info_table tr td {
    vertical-align: middle;
    height: 40px;
    border-bottom: none;
}

.g_info_table tr:nth-child(even) {
    background-color: #FFF;
}

这是 HTML（我正在使用淘汰赛）

<div data-bind ="visible: gInfoDiv()">
    <div class = "left_half">
        <table class = "g_info_table">
                <tr><td width = "100px">First Name</td><td><input data-bind="value: firstName" type="text" class = "medium_input" ></td></tr>
                <tr><td width = "100px">Last Name</td><td><input data-bind="value: lastName" type="text" class = "medium_input"></td></tr>
                <tr><td width = "100px">Address</td><td><input data-bind="value: address" type="text" class = "medium_input"></td></tr>
                <tr><td width = "100px">City</td><td><input data-bind="value: city" type="text" class = "medium_input"></td></tr>
        </table>
    </div>
</div>
4

1 回答 1

0

left_half在加载其余表格样式之前，我会在表格容器上添加一个重置：

.left_half * {
    margin: 0;
    padding: 0;
    border: none;
}

.medium_input{
    display: block;
    width:90%; 
    height:30px;
    font-size:12px;
    padding: 0;
    margin: 0;
}
.left_half {
    width: 49%;
    float: left;
}

.g_info_table {
    width:100%;
    margin-bottom: 0;
}

.g_info_table tr td {
    vertical-align: middle;
    height: 40px;
    border-bottom: none;
}

.g_info_table tr:nth-child(even) {
    background-color: #FFF;
}

我不是专家，但当你无法控制继承时，你就会这样做。

于 2013-10-17T23:19:08.393 回答