V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
nikoo
V2EX  ›  问与答

CSS 问题,不用 display:flex 是否能实现这个功能?

  •  
  •   nikoo · 2020-02-25 16:04:44 +08:00 · 1864 次点击
    这是一个创建于 1493 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个不定长的 div,里面包含一个 input 与一个提交按钮,要求 input 可以自适应宽度
    有可能不用 flex 实现这个功能吗?

    例子: https://jsfiddle.net/ko08g7za/
    (左右拖动改变窗口宽度可以看到 input+button 始终能占满 div )
    25 条回复    2020-02-25 19:58:11 +08:00
    GDC
        1
    GDC  
       2020-02-25 16:12:21 +08:00
    可以,方法有很多,比如 input 的宽度用 calc() 计算,就看你不用 flex 的原因是啥了
    fanxingyu9555666
        2
    fanxingyu9555666  
       2020-02-25 16:14:43 +08:00 via iPhone
    Calc 计算宽度
    nikoo
        3
    nikoo  
    OP
       2020-02-25 16:15:23 +08:00
    @GDC 是考虑浏览器兼容性(是否想多了?)
    nikoo
        4
    nikoo  
    OP
       2020-02-25 16:16:21 +08:00
    @fanxingyu9555666 如果是考虑浏览器兼容性那似乎还不如 flex ?
    Steps
        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>
    nikoo
        6
    nikoo  
    OP
       2020-02-25 16:18:22 +08:00
    @Steps 这不还是用 display:flex ?
    GDC
        7
    GDC  
       2020-02-25 16:18:27 +08:00   ❤️ 1
    @nikoo 考虑浏览器兼容性,要看你的用户群体是什么,准备兼容到 IE 几,你去看看 Bootstrap 4 用了多少 flex,关键还是看网站的用户群体
    wunonglin
        8
    wunonglin  
       2020-02-25 16:18:39 +08:00
    你这个例子就是 ok 的啊,什么年代了还有不支持 flex 的么,ie 不是浏览器
    loading
        9
    loading  
       2020-02-25 16:22:23 +08:00
    既然没说不能加 js,那不就几行么。
    whypool
        10
    whypool  
       2020-02-25 16:22:33 +08:00
    都什么年代了还不能用 flex ?
    ie 不是浏览器
    RtIHZ
        11
    RtIHZ  
       2020-02-25 16:23:00 +08:00
    cmdOptionKana
        12
    cmdOptionKana  
       2020-02-25 16:23:25 +08:00
    @nikoo 这也算一种过早优化了,先上线,后台统计访问你们页面的都有哪些浏览器,然后再决定需要适配到什么程度。
    liyang5945
        13
    liyang5945  
       2020-02-25 16:24:39 +08:00   ❤️ 3
    最简单的,父 div 设置一个右 padding,宽度比按钮稍宽一些,设置相对定位,里面的 input 设置宽度 100%,提交按钮设置绝对定位
    nikoo
        14
    nikoo  
    OP
       2020-02-25 16:27:14 +08:00
    @liyang5945 好办法!谢谢!
    darmau
        15
    darmau  
       2020-02-25 16:27:38 +08:00
    现在真的很难找到不支持 flexbox 的浏览器了
    geelaw
        16
    geelaw  
       2020-02-25 16:30:47 +08:00
    用 display: table 也可以
    learnshare
        17
    learnshare  
       2020-02-25 16:33:11 +08:00
    flex 出现之前有很多方法,flex 出现之后就只推荐 flex 了
    netnr
        18
    netnr  
       2020-02-25 16:47:54 +08:00   ❤️ 1
    lneoi
        19
    lneoi  
       2020-02-25 17:09:43 +08:00
    外层用 div 包裹 input 和 button,button 用 position:absolute 右侧,这样可以写死大小。左侧 input 设置 100%,然后 div 给一个 padding-right 大小稍大于 button 的大小
    两个都是动态大小会更方便点
    yimity
        20
    yimity  
       2020-02-25 17:12:31 +08:00
    如果你 button 可以固定宽度的话,可以尝试定位的方式。当然了 100% 布局也是可以的。
    https://jsfiddle.net/f0dLxcpb/
    lemon6
        21
    lemon6  
       2020-02-25 17:14:23 +08:00
    calc(100% - xxxpx)
    Steps
        22
    Steps  
       2020-02-25 17:30:00 +08:00
    @nikoo #6 抱歉,我没看清楚要求,我以为要用 flex
    Steps
        23
    Steps  
       2020-02-25 17:30:25 +08:00
    @lneoi #19 正解!
    otakustay
        24
    otakustay  
       2020-02-25 18:09:42 +08:00
    容器 div 占满宽度,padding 留出按钮的位置
    input 放在 div 里面占满 div 的宽度
    button 用绝对定位放边上
    https://codepen.io/otakustay/pen/oNXBmmQ
    这种效果?
    dimlau
        25
    dimlau  
       2020-02-25 19:58:11 +08:00
    grid 也是一样。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1003 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 19:27 · PVG 03:27 · LAX 12:27 · JFK 15:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.