在 React 中删除内联块元素之间的空间

IT技术 javascript html css reactjs
2021-05-27 14:08:53

在将此问题标记为重复之前,请阅读以下内容:

我正在尝试的是在 react 中专门执行此操作,如果这是 html,则就像执行以下操作一样简单(div 是内联块):

<div>something</div><
div>something2</div>

这将导致 div 之间没有空白,很酷,但我不能在 React 中这样做,因为 React 使用 JSX 而不是 HTML。

我已经阅读了使用 CSS 执行此操作的不同解决方案,其中一些是:

  • 将 margin-left 设置为负值(这在调整浏览器窗口大小时可能会中断(它基本上不会响应)

  • 将父容器字体大小设置为 0(我读过这在某些平台上有问题)

  • 将父容器向左浮动(我需要使用 text-align 和浮动只会把一切搞砸)。

所以唯一的办法就是使用 flexbox,但我想知道是否还有其他方法可以删除这些空格(如果没有,我将使用 flexbox/table)。

1个回答

React 特别不会在块元素之间添加空格,您需要自己手动添加。请参阅Github 上的此讨论解释详细信息的官方博客文章

这是一个简单的例子: