css - CSS 不想在 Icon 下面看到文字

Question

我正在使用反应在左侧显示图标并在右侧显示跨度 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>
);

标签： cssreactjs

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>