元素自适应宽度、换行

java哥 阅读:198 2022-03-07 15:15:23 评论:0
通过设置百分比和最小宽度来实现,放大可以均匀排列,缩小可以自动换行


#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>
标签:JavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

搜索
排行榜
关注我们

一个IT知识分享的公众号