css - 表单容器resize时，里面的表单项怎么才不会被挤到下一行？
本文介绍了css - 表单容器resize时，里面的表单项怎么才不会被挤到下一行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1 表单容器resize时，里面的表单项怎么才不会被挤到下一行？
想达到的效果：当resize容器的时候，如果容器里宽度不够，显示滚动条，而不是表单项被挤下去
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-1.11.3.js"></script>
<script src="jquery-ui.min.js"></script>y>
<div class="container">
<form>
<select>
<option>test</option>
</select>
<select>
<option>test</option>
</select>
<input type="text">
</form>
</div>
<script>
$( ".container" ).resizable();
</script>
</body>
</html
解决方案
你都把.container搞得resizable了，当然可能会被挤下去啦！应该是这么做：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: #ccc;
}
.form{
width: 300px;
min-width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-1.11.3.js"></script>
<script src="jquery-ui.min.js"></script>y>
<div class="container">
<div class="form">
<form>
<select>
<option>test</option>
</select>
<select>
<option>test</option>
</select>
<input type="text">
</form>
</div>
</div>
<script>
$( ".container" ).resizable();
</script>
</body>
</html中间再加一层.form让这个区块宽度死活不变，让最外层的.container是resizable的，这样的话，外部.container变小的时候，里面也不会变窄。
代码我们验证，但思路就这样，滚动条什么的如果效果不好，你再自己调调吧
这篇关于css - 表单容器resize时，里面的表单项怎么才不会被挤到下一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
