在 React 中删除内联块元素之间的空间 [英] Remove space between inline-block elements in React

问题描述

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

我正在尝试专门在 react 中执行此操作，如果这是 html，这将与执行类似的操作一样简单(div 为内联块):

东西
<
something2

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

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

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

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

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

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

解决方案

React 特别不会在块元素之间添加空格，您需要自己手动添加.请参阅 Github 上的此讨论和官方博文 解释细节.

这是一个简单的例子:

class SimpleExample extends React.Component {使成为() {返回 (<div><div>否</div><div>空格</div>这里

);}}ReactDOM.render(, document.getElementById('example'));

div {显示:内联块；}

<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>

Before you mark this question as a duplicate, please read this:

What I am trying is to specifically do this in react, if this was html this would be as easy as doing something like (div being inline-block):

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

That would result in no white space between the divs, cool, but I can't do that in React as React uses JSX instead of HTML.

I've read different solutions for doing this with CSS, some of them are:

• Setting a margin-left with a negative value (this probably will break when resizing the browser window (it won't be responsive basically)

• Setting the parent container font-size to 0 (I've read this is buggy in some platforms)

• Floating the parent container to the left (I need the use of text-align and floating just messes everything up).

So the only thing would be to use flexbox, but I wonder if there's any other way of removing those white spaces (if not, I will use flexbox/table).

解决方案

React specifically doesn't add whitespace between block elements, you need to do that yourself manually. See this discussion on Github and an official blog post explaining the details.

Here is a simple example:

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>

这篇关于在 React 中删除内联块元素之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！