四次元口袋 2019-07-24 13:41 采纳率: 0%
浏览 350

如何删除inline-block元素之间的空格?

给定这个 HTML 和 CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;}
<p>
    <span> Foo </span>
    <span> Bar </span></p>

因此,SPAN 元素之间将有4个像素宽的空间。
演示: http://jsfiddle.net/dGHFV/
我知道为什么会出现这种情况,我也知道可以通过删除 HTML 源代码中 SPAN 元素之间的空白来消除这种空白,如下所示:

<p>
    <span> Foo </span><span> Bar </span></p>

然而,我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。
我知道如何用 JavaScript 来解决这个问题——通过从容器元素(段落)中移除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http://jsfiddle.net/dGHFV/1/

但是这个问题能单独用 CSS 解决吗?

  • 写回答

2条回答 默认 最新

  • weixin_38166435 2019-07-24 14:06
    关注

    实际的问题是:
    如何删除内联块元素之间的空间? 我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。 这个问题能单独用 CSS 解决吗?
    单独使用 CSS 是可以解决这个问题的,但是没有完全给力的 CSS 修复程序。
    作为一个经验丰富的开发者,我实际上是这样做来解决这个问题的:

    <p>
        <span>Foo</span><span>Bar</span></p>
    

    是的,没错。 我删除了 HTML 中内联块元素之间的空白。
    真的很简单。管用!务实!
    有时候你必须仔细考虑空格从哪里来。 用 JavaScript 追加另一个元素会增加空格吗? 不,如果你做得好就不会。
    让我们用一些新的 HTML 代码,通过不同的方式来移除空格,让我们开始一段神奇的旅程:

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li></ul>
    

    你可以这样做,就像我通常做的:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
    

    或者,这个:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li></ul>
    

    或者,使用评论:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li></ul>
    

    或者,如果你正在使用 PHP 或类似的工具:

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li></ul>
    

    或者,你甚至可以完全跳过某些结束标签(所有浏览器都可以这样做) :

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3</ul>
    

    现在我已经用多种方法删除空格
    或者,你现在可以使用 flexbox 来实现以前使用内联块来实现的布局

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题