时间戳

首页 > 解决方案 > CSS，REACT：不能将兄弟姐妹放在一行上；

css - CSS，REACT：不能将兄弟姐妹放在一行上；

问题描述

我想要什么 vs 我有什么

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

这是我的“li”元素的 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”元素）是外部容器的全宽，这就是为什么它不会让它的兄弟姐妹在同一行上，即使只有一个词 on下一行是全宽的。

标签： cssreactjs

解决方案

改变

<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)};
  }
`;

导致此问题的原因是 display: flex<span>元素，不知道为什么它不起作用，但我还是解决了它，只是用等效的属性替换它，即使没有display: flex:)

推荐阅读