jQuery MiniUI 开发教程表单控件表单：控件尺寸调整（四）

最新推荐文章于 2021-08-04 07:58:14 发布

最新推荐文章于 2021-08-04 07:58:14 发布 · 1.8k 阅读

文章标签：

#jquery #UI #Ajax #JavaScript #css #ViewUI

jquery 专栏收录该内容

69 篇文章

订阅专栏

本文介绍了如何使用CSS样式调整Web表单控件如按钮、输入框等的高度和宽度，包括直接在style属性中设置宽度及编写特定的CSS样式来改变高度。

[b]表单：控件尺寸调整[/b]
[img]http://www.miniui.com/docs/api/images/diysize.gif[/img]

参考示例：[url=http://www.miniui.com/demo/form/form.html]表单：加载、保存[/url]

[b]宽度调整[/b]
可以在style中直接设置：
<input class="mini-textbox" style="width:200px;"/>

[b]高度调整[/b]
如果需要调整按钮、输入框、下拉框、日期框等控件的高度，需要通过CSS样式，如下代码：

/* button */
.mini-button-text
{
padding-top:1px;
padding-bottom:2px;

padding-top:3px\9;
padding-bottom:1px\9;
}
/* textbox */
.mini-textbox
{
height:19px;
}
.mini-textbox-input
{
height:17px;
line-height:15px;
}
/* buttonedit */
.mini-buttonedit
{
height:19px;
}
.mini-buttonedit-border
{
height:17px;
}
.mini-buttonedit-input
{
height:17px;
line-height:15px;
}
.mini-buttonedit-button
{
height:13px;
}
.mini-buttonedit-icon
{

width:15px;
height:14px;
}
.mini-datepicker .mini-buttonedit-icon
{
background-position:50% 1px;
}