元素自适应宽度、换行

最新推荐文章于 2023-02-16 10:28:53 发布

weixin_30492601

最新推荐文章于 2023-02-16 10:28:53 发布

阅读量332

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vvch/p/4027575.html

版权

通过设置百分比和最小宽度来实现，放大可以均匀排列，缩小可以自动换行

#kpi_tb input{
width: 100px;
}
#kpi_tb .row{
margin:0px;
padding:0px;
width: 100%;
text-align:center;
display: inline-block;
position: relative;
}
#kpi_tb .col{
position:relative;
margin:0px;
padding:3px 0px;
display: inline-block;
}
</style>
</head>
<body id="maskDiv">
<table id="kpi_table"></table>
<div id="kpi_tb">
<span class="row">
<span class="col" style="width:17% ;min-width: 180px;">专题列表:<input id="subject_id" /></span>
<span class="col" style="width:14% ;min-width: 150px;">名称:<input id="priv_name" class="combo-text validatebox-text"/></div>
<span class="col" style="width:27% ;min-width: 280px;">查询时间:<input id="start_month"/> - <input id="end_month"/></span>
<span class="col" style="width:23% ;min-width: 240px;">排序字段:<input id="order_col" /><input id="desc_asc"/></span>
<span class="col" style="width:7% ;min-width: 70px;"><a id="search_btn" href="#" class="easyui-linkbutton" >查询</a></span>
</span>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/vvch/p/4027575.html