html - 如何使用kendo-ui更改文本框的宽度？

Question

我想要两个相邻的文本框具有不同的宽度，使用kendo-ui。

我的 HTML:

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textbox.medium"><input type="text" class="k-input k-textbox.small"></td>
</tr>

我的CSS:

.k-textbox.small{
    width: 20px;
}
.k-textbox.medium{
    width: 50px;
}

问题是，两个文本框都以相同的(默认)大小显示。如何正确设置文本框的样式？

Answer 1

试试这个:

HTML 代码:

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textboxmedium">
        <input type="text" class="k-input k-textboxsmall"></td>
</tr>

CSS 代码:

.k-textboxsmall{
    width: 20px !important; 
}
.k-textboxmedium{
    width: 50px !important;
}