这是一个创建于 1760 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个不定长的 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
wunonglin 2020-02-25 16:18:39 +08:00
你这个例子就是 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
nikoo 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