首页 > 表单容器resize时,里面的表单项怎么才不会被挤到下一行?

表单容器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让这个区块宽度死活不变,让最外层的.containerresizable的,这样的话,外部.container变小的时候,里面也不会变窄。

代码我们验证,但思路就这样,滚动条什么的如果效果不好,你再自己调调吧

【热门文章】
【热门文章】