这是一个创建于 2054 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个不定长的 div，里面包含一个 input 与一个提交按钮，要求 input 可以自适应宽度
有可能不用 flex 实现这个功能吗？
例子： https://jsfiddle.net/ko08g7za/
（左右拖动改变窗口宽度可以看到 input+button 始终能占满 div ）
有可能不用 flex 实现这个功能吗？
例子： https://jsfiddle.net/ko08g7za/
（左右拖动改变窗口宽度可以看到 input+button 始终能占满 div ）
 | 1 GDC 2020-02-25 16:12:21 +08:00 可以，方法有很多，比如 input 的宽度用 calc() 计算，就看你不用 flex 的原因是啥了 |
 | 2 fanxingyu9555666 2020-02-25 16:14:43 +08:00 via iPhone Calc 计算宽度 |
 | 4 nikoo OP @fanxingyu9555666 如果是考虑浏览器兼容性那似乎还不如 flex ？ |
 | 5 Steps 2020-02-25 16:17:07 +08:00 当然可以。。。 <div style="display: flex;"> <div style="flex: 1;width: 100%;"><input style="width: 100%;"></div> <div style="width: 80px;"><button type="button" style="width: 100%">按钮</button></div> </div> |
 | 7 GDC 2020-02-25 16:18:27 +08:00  1 @nikoo 考虑浏览器兼容性，要看你的用户群体是什么，准备兼容到 IE 几，你去看看 Bootstrap 4 用了多少 flex，关键还是看网站的用户群体 |
 | 8 shakaraka PRO 你这个例子就是 ok 的啊，什么年代了还有不支持 flex 的么，ie 不是浏览器 |
 | 9 loading 2020-02-25 16:22:23 +08:00 既然没说不能加 js，那不就几行么。 |
 | 10 whypool 2020-02-25 16:22:33 +08:00 都什么年代了还不能用 flex ？ ie 不是浏览器 |
 | 11 RtIHZ 2020-02-25 16:23:00 +08:00 |
 | 12 cmdOptionKana 2020-02-25 16:23:25 +08:00 @nikoo 这也算一种过早优化了，先上线，后台统计访问你们页面的都有哪些浏览器，然后再决定需要适配到什么程度。 |
 | 13 liyang5945 2020-02-25 16:24:39 +08:00 3 最简单的，父 div 设置一个右 padding,宽度比按钮稍宽一些，设置相对定位，里面的 input 设置宽度 100%，提交按钮设置绝对定位 |
| 14 OP @liyang5945 好办法！谢谢！ |
 | 15 darmau 2020-02-25 16:27:38 +08:00 现在真的很难找到不支持 flexbox 的浏览器了 |
 | 16 geelaw 2020-02-25 16:30:47 +08:00 用 display: table 也可以 |
 | 17 learnshare 2020-02-25 16:33:11 +08:00 flex 出现之前有很多方法，flex 出现之后就只推荐 flex 了 |
 | 18 netnr 2020-02-25 16:47:54 +08:00 1 |
 | 19 lneoi 2020-02-25 17:09:43 +08:00 外层用 div 包裹 input 和 button，button 用 position:absolute 右侧，这样可以写死大小。左侧 input 设置 100%，然后 div 给一个 padding-right 大小稍大于 button 的大小 两个都是动态大小会更方便点 |
 | 20 yimity 2020-02-25 17:12:31 +08:00 如果你 button 可以固定宽度的话，可以尝试定位的方式。当然了 100% 布局也是可以的。 https://jsfiddle.net/f0dLxcpb/ |
 | 21 lemon6 2020-02-25 17:14:23 +08:00 calc(100% - xxxpx) |
 | 24 otakustay 2020-02-25 18:09:42 +08:00 容器 div 占满宽度，padding 留出按钮的位置 input 放在 div 里面占满 div 的宽度 button 用绝对定位放边上 https://codepen.io/otakustay/pen/oNXBmmQ 这种效果？ |
 | 25 dimlau 2020-02-25 19:58:11 +08:00 grid 也是一样。 |
Select Language