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

请教 css 问题:两个 button 怎么连在一起,中间没有空隙

  •  
  •   zxCoder · 2021-11-08 19:19:49 +08:00 · 913 次点击
    这是一个创建于 1142 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <button>a</button><button>b</button>
    

    这样是可以的,但是 ide 会格式化,加上个回车,导致两个按钮之间有空隙

    learnshare
        1
    learnshare  
       2021-11-08 19:48:15 +08:00
    和这个类似 /t/807493
    dcalsky
        2
    dcalsky  
       2021-11-08 19:56:59 +08:00
    用 css 保证样式,而不是依赖 html 语义化的约定默认样式。
    christin
        3
    christin  
       2021-11-08 19:59:40 +08:00 via iPhone
    Kaciras
        4
    Kaciras  
       2021-11-08 20:46:13 +08:00
    那就不要格式化
    3dwelcome
        5
    3dwelcome  
       2021-11-08 21:04:44 +08:00 via Android
    我也遇到过类似的问题,ide 为了对齐,每个 span 占了一整行,换行符最终变成了页面中的空隙。
    这就是我不喜欢 html 的地方,还是 C++好。
    iBugOne
        6
    iBugOne  
       2021-11-08 21:13:38 +08:00 via Android
    外面的容器设成 flex
    Biwood
        7
    Biwood  
       2021-11-08 21:18:26 +08:00
    1. 使用 html 压缩工具,去掉不必要的格式化字符

    2. 有空隙是因为回车符号被浏览器解析为一个空格字符,空格字符默认会占有一定的宽度,想要这个宽度消失,很简单,只需要让这个字符大小为 0 即可,也就是说,需要给 button 的父元素设置 font-size: 0 ,当然,这可能会导致所有子元素的字体都看不到,需要手动给子元素在设置一下字体大小

    3. 给 button 的父元素设置 display: flex ,然后分别设置 button 的 flex 值,比如 1 1 auto
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5507 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:37 · PVG 14:37 · LAX 22:37 · JFK 01:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.