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
变小的时候,里面也不会变窄。
代码我们验证,但思路就这样,滚动条什么的如果效果不好,你再自己调调吧