如何在 div 的所有 children 之间添加 space

Question

我有一个样式 div，我想要在所有 children 之间添加一些 space。由于 children 可以是项目中的任何其他组件（按钮、div、段落等），我无法向这些组件添加填充，所以我想从样式 div 本身。也不知道 div 会有多少 children。有时它可以是空的，有时它可以有三个或四个 children.

有办法吗？

我已经尝试了几种方法，但到目前为止没有任何效果。

这是现在的 div：（美学造型在其 parent 中完成）

const StyledBox = styled.div`
    float: right;
    min-width: 50px;
`

这个div是页眉的一部分

const StyledParent = styled.div`
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
`

const StyledBottom = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    min-height: 65px;
`

const Header = (props) => {
    return (
        <StyledParent {...props}>
            <StyledTop {...props}>
            </StyledTop>
            <StyledBottom>
                <StyledBox {...props}></StyledBox>
            </StyledBottom>
        </StyledParent>
    )
}

Answer 1

您可以使用 * css 选择器为 div 中的任何元素设置样式：

const Div = styled.div`
 * {
   //style applied to every elements
  }
`;

要在每个之后添加 space，您可以像这样使用 after pseudo-class：

const Div = styled.div`
  * {
    &::after {
      content: " "; //space inserted after each element
    }
  }
`

如何在 div 的所有 children 之间添加 space

How to add space between all children of div

reactjs

styled-components