我使用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>
);
发布于 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>
发布于 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>
);
https://stackoverflow.com/questions/51225870
复制相似问题