CSS不想在图标下面看到文本
CSS不想在图标下面看到文本
提问于 2018-07-08 02:22:11
我使用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>
);回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-08 02:49:26
您可以使用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>
Stack Overflow用户
发布于 2018-07-08 02:57:22
对容器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>
);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51225870
复制相关文章
相似问题