在 React 中删除行内块元素之间的空间答案

【问题标题】：Remove space between inline-block elements in React在 React 中删除行内块元素之间的空间
【发布时间】：2019-05-09 10:41:18
【问题描述】：

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

我正在尝试专门在反应中执行此操作，如果这是 html，这将与执行类似（div 是内联块）一样简单：

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

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

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

用负值设置margin-left（这可能会在调整浏览器窗口大小时中断（它基本上不会响应）
将父容器的字体大小设置为 0（我已经读过这在某些平台上是错误的）
将父容器浮动到左侧（我需要使用 text-align 和浮动只会弄乱一切）。

所以唯一的办法就是使用 flexbox，但我想知道是否有任何其他方法可以删除这些空白（如果没有，我将使用 flexbox/table）。

【问题讨论】：

评论的事情怎么样？ <div>something</div><div>something2</div>?
关于font-size:0 的漏洞：您阅读了哪些平台，您将支持哪些平台？ React 是否支持这些？
@yunzen 那是一个HTML注释，JSX中不存在
@yunzen 我读到它在低于 4.x 版本的 Android 上存在问题（我不记得确切的版本）。我正在开发的是一个网络应用程序，它也应该可以在手机上运行。

标签： javascript html css reactjs

【解决方案1】：

React 特别不会在块元素之间添加空格，您需要自己手动添加。请参阅 Github 上的 this discussion 和官方 blog post 解释详细信息。

这是一个简单的例子：

class SimpleExample extends React.Component {
	render() {
		return (
			<div>
        <div>NO</div>
        <div>SPACES</div>
        HERE
			</div>
		);
	}
}

ReactDOM.render(<SimpleExample />, document.getElementById('example'));

div {
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="example"></div>

【讨论】：

就是这样，我以为有空格，因为所有内容都出现在新行，但最终是一个特定的 css 属性弄乱了它。