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

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

希望它会对你有所帮助。

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

2 个答案: