React删除空格

Question

这是一个范围元素列表

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

这些元素的CSS样式：

span{
  background: red;
}

在React应用程序和本地html + css文件中，结果看起来有所不同。

链接到Codepan https://codepen.io/Letsrock/pen/morogX

如您在屏幕截图上所见：

如何使React展示元素之间的空间？

这是React组件：

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>
    );
  }
}

export default App;

Answer 1

这是React的预期行为。 https://github.com/facebook/react/issues/1643

您可以在每个跨度之间添加空白文本空间。

<span>1</span>
{' '}
<span>2</span>

Answer 2

将此添加到App.css应该可以

span {
  background: red;
  margin-left: 2px;
}

它使用margin来完成技巧。根据需要调整其值。

Answer 3

将此CSS添加到您的flask init-db中：

解决方案A：

flask run

App.css

解决方案B：

span {
  background: red;
  margin-right: 5px;
}

<div>
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>