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

【问题标题】：How to change width of text-box using kendo-ui?如何使用 kendo-ui 更改文本框的宽度？
【发布时间】：2014-10-18 11:30:03
【问题描述】：

我想要两个不同宽度的相邻文本框，使用 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;
}

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

【问题讨论】：

标签： html css textbox kendo-ui

【解决方案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;
}

【讨论】：

【解决方案2】：

你应该喜欢它-

input[type='text'].k-textbox.small{
    width: 20px;
}
input[type='text'].k-textbox.medium{
    width: 50px;
}

或

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

希望对你有帮助。

【讨论】：