[英]Remove space between inline-block elements in React
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): 我正在尝试的是专门在react中执行此操作,如果这是html,则就像执行以下操作一样容易(div被内联块):
<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. 那将导致div之间没有空格,很酷,但是我无法在React中做到这一点,因为React使用JSX而不是HTML。
I've read different solutions for doing this with CSS, some of them are: 我已经阅读了使用CSS进行此操作的不同解决方案,其中一些是:
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) 将父容器的font-size设置为0(在某些平台上,我已经读到了这个错误)
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). 因此,唯一的办法就是使用flexbox,但是我想知道是否还有其他方法可以删除那些空格(如果没有,我将使用flexbox / table)。
React specifically doesn't add whitespace between block elements, you need to do that yourself manually. React特别不会在块元素之间添加空格,您需要自己手动进行。 See this discussion on Github and an official blog post explaining the details.
请参阅有关Github的讨论和解释其详细信息的官方博客文章 。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.