CSS，REACT:无法在一行上定位同级

Question

我想要什么与我有什么

请看我附上的图纸，因为我无法分享我所拥有的原始截图。

这是我的React代码；李；元素：

import { Typography } from "@material-ui/core";
...
const { subscriptions } = useContext(SubscriptionsContext);
...
const renderSubscriptionLinks = () => {
return (<S.List>{subscriptionsList.map((el : SubscriptionDescription) => (
<S.LinkContainer key={el.name}><div><S.LinkStyled href="google.com"><Typography variant="body2">{el.name + "  "}</Typography></S.LinkStyled> - <S.BestFor variant="body3">{el.bestFor + "  "}</S.BestFor></div></S.LinkContainer>
))}</S.List>);

}；

样式组件代码：

export const LinkStyled = styled("a")`
color: black;
text-decoration: none;
margin-right: ${({ theme }) => theme.spacing(0.25)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-right: ${({ theme }) => theme.spacing(0.5)};
}
p { font-weight: 600; }
`
export const LinkContainer = styled("li")`
padding: 0;
min-height: 40px;
&:not(:last-child) { margin-bottom: ${({ theme }) => theme.spacing(1)}; }
::marker {
font-size: 25px;
}
${({ theme }) => theme.breakpoints.up('md')} {
&:not(:last-child) { margin-bottom: ${({ theme }) => theme.spacing(2)}; min-height: unset; }
}
div {
display: flex;
flex-wrap: wrap;
font-size: 14px;
align-items: center;
position: relative;
top: -3px;
color: black;
}
box-sizing: content-box;
color: ${({ theme }) => theme.palette.red};
`
export const BestFor = styled(Typography)`
margin-left: ${({ theme }) => theme.spacing(0.25)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-left: ${({ theme }) => theme.spacing(0.5)};
}
`
export const List = styled("ul")`
width: 90%;
padding: 0;
margin: 0;
max-width: 904px;
margin-left: ${({ theme }) => theme.spacing(3)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-left: ${({ theme }) => theme.spacing(8.75)};
}
`;

我有一个订阅描述页面，数据来自API。

要复制，请执行以下操作：

function Subscriptions () {
return (<>
<S.List><S.LinkContainer key={0}><div><S.LinkStyled href="google.com"><Typography variant="body2">Lorem lorem lorem lorem lorem lorem lorem lorem lorem</Typography></S.LinkStyled> - <S.BestFor variant="body3">Ipsum ipsum ipsum</S.BestFor></div></S.LinkContainer>
<S.LinkContainer key={0}><div><S.LinkStyled href="google.com"><Typography variant="body2">Lorem lorem lorem lorem lorem lorem lorem lorem lorem</Typography></S.LinkStyled> - <S.BestFor variant="body3">Ipsum ipsum ipsum</S.BestFor></div></S.LinkContainer>
<S.LinkContainer key={0}><div><S.LinkStyled href="google.com"><Typography variant="body2">Lorem lorem lorem lorem lorem lorem lorem lorem lorem</Typography></S.LinkStyled> - <S.BestFor variant="body3">Ipsum ipsum ipsum</S.BestFor></div></S.LinkContainer>
<S.LinkContainer key={0}><div><S.LinkStyled href="google.com"><Typography variant="body2">Lorem lorem lorem lorem lorem lorem lorem lorem lorem</Typography></S.LinkStyled> - <S.BestFor variant="body3">Ipsum ipsum ipsum</S.BestFor></div></S.LinkContainer>
</S.List>
</>)
}

在Devtools中，我看到LinkStyled("a"元素(是外部容器的全宽，这就是为什么它不让它的兄弟行和它在同一行，即使下一行只有一个字是全宽的。

Answer 1

更改

<S.LinkContainer key={el.name}><div><S.LinkStyled href="google.com"><Typography variant="body2">{el.name + "  "}</Typography></S.LinkStyled> - <S.BestFor variant="body3">{el.bestFor + "  "}</S.BestFor></div></S.LinkContainer>

至

<S.LinkContainer key={el.name}><span><S.LinkStyled href="google.com"><Typography variant="body2">{el.name}</Typography></S.LinkStyled> - <S.BestFor variant="body3">{el.bestFor}</S.BestFor></span></S.LinkContainer>

样式组件将分别更改为：

export const LinkStyled = styled("a")`
color: black;
text-decoration: none;
display: inline;
margin-right: ${({ theme }) => theme.spacing(0.25)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-right: ${({ theme }) => theme.spacing(0.5)};
}
p { font-weight: 600; display: inline; }
`
export const LinkContainer = styled("li")`
padding: 0;
min-height: 40px;
width: 80vw;
white-space: break-spaces;
&:not(:last-child) { margin-bottom: ${({ theme }) => theme.spacing(1)}; }
::marker {
font-size: 25px;
}
${({ theme }) => theme.breakpoints.up('md')} {
&:not(:last-child) { margin-bottom: ${({ theme }) => theme.spacing(2)}; min-height: unset; }
}
> span {
width: 80vw;
font-size: 14px;
align-items: center;
display: contents;
position: relative;
top: -3px;
color: black;
@-moz-document url-prefix() {
top: -25px;
}
}
box-sizing: content-box;
color: ${({ theme }) => theme.palette.primaryOrange.main};
`
export const BestFor = styled(Typography)`
margin-left: ${({ theme }) => theme.spacing(0.25)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-left: ${({ theme }) => theme.spacing(0.5)};
}
`
export const List = styled("ul")`
width: 90%;
padding: 0;
margin: 0;
max-width: 904px;
margin-left: ${({ theme }) => theme.spacing(3)};
${({ theme }) => theme.breakpoints.up('md')} {
margin-left: ${({ theme }) => theme.spacing(8.75)};
}
`;

导致这个问题的原因是显示：<span>元素的flex，不确定它为什么不起作用，但我无论如何都解决了它，只是用等效的属性替换，即使没有display: flex也能给出预期的结果：(