使用函数动态生成标记

Question

我想显示动态标签。我似乎无法让我的css看起来很好看。容器是响应性的，因此必须很好地破坏：

CSS：

.tags {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin: 0.5em;
}

显示如下：

mapTags = tagArray => {
  return tagArray.map((item, i) => <span key={i} className={styles.tags}>
  {item}</span>);
};

请帮助。

奖励：有时标签包含空格，例如“这是一个标签”。如何在这里解决我的边界？

Answer 1

<span>是一个内联元素。尝试使用<div>。 如果以某种方式有必要使用span，请尝试应用display: block属性。但即使它有效，这也不是理想的做法。