CSS不想在Icon下面看到文本

Question

我正在使用react在左侧显示图标，在右侧显示span div。我不想在图标下方添加文字。它应该与右边很好地对齐。

export const MMText = styled.span`
font-family: Myanmar3;
font-size: 10px;
`;

export const BulletIcon = styled(Icon)`
color: rgba(0, 0, 0, 0.25);
margin-right: 10px;
`;

const MMBulletText = ({ text }) => (
  <div>
    <BulletIcon type="star" />
    <MMText> {text} </MMText>
    <br />
    <br />
  </div>
);

Answer 1

您可以使用flexbox。像这样：

（显然.icon可以包含任何内容，而不仅仅是文本。在您的情况下，是svg图标，字体图标，img或类似的东西）

.wrapper {
  display: flex;
}

.icon {
  margin-right: 10px;
}

<div class="wrapper">
  <span class="icon">Icon</span>
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda suscipit alias qui cupiditate eligendi incidunt optio, eveniet commodi tempore accusantium molestiae quibusdam similique consequuntur, nobis voluptatum, accusamus reiciendis porro sit.</span>
</div>

Answer 2

为容器div使用flex布局会有所帮助。

const FlexContainer = styled.div`
display: flex;
`;

export const MMText = styled.span`
font-family: Myanmar3;
font-size: 10px;
`;

export const BulletIcon = styled(Icon)`
color: rgba(0, 0, 0, 0.25);
margin-right: 10px;
`;

const MMBulletText = ({ text }) => (
  <FlexContainer>
    <BulletIcon type="star" />
    <MMText> {text} </MMText>
    <br />
    <br />
  </FlexContainer>
);

Answer 3

我对反应一无所知，但也许如果您在文本中添加以下内容，它将起作用。

text {
  white-space: nowrap;
}