justify content space-between，线性动画的内容，在插入更多项目时不留空间答案

【问题标题】：Justify content space-between, content which animates linearly, does not leave space when more items are insertedjustify content space-between，线性动画的内容，在插入更多项目时不留空间
【发布时间】：2022-01-04 18:49:40
【问题描述】：

我正在努力实现这一目标。

End Goal

但是当有 2 个以上的项目或者它们非常长时它们粘在一起，我怀疑它们部署的空间很小，所以它们的行为就是这样。我尝试了一些方法，但没有找到解决方案。

What ends up happening

这是 HTML* 的一部分（我正在使用 React）。 “TextWrapper”基于 ul 标签，“Text”基于 li 标签。您可以在代码中进一步查看。

<TextWrapper>
     <Text> sahfdgfkjus bfkasascef efsaecfs efcsaecfarygadr</Text>
     <Text> re aser swtfas4 tsfgase tawe4 srgsagsefgas </Text>
</TextWrapper>

这是我正在使用的 CSS

export const TextWrapper = styled.ul`
    position: absolute;

    display: flex;
    justify-content: space-between;
    
    margin: 0px;
    list-style-type: none;

    padding-top: 9px;
    padding-bottom: 1px;
    padding-left: 0px;

    left: 98px;
    right: 0px;

    width: auto;
    height: 30px;

    overflow: hidden;
`;

export const Text = styled.li`
    position: relative;

    opacity: var(--highEmphasis);
    font-size: var(--fontMed);
    background: none;

    white-space: nowrap;

    animation: floatText 15s infinite linear;

    @keyframes floatText{
        from {
            right: -100%;
        }

        to {
            right: 100%;
        }
    }
`;

【问题讨论】：

标签： html css reactjs css-animations text-justify

【解决方案1】：

尝试为您的文本元素赋予“width:100vw”值

【讨论】：

我试过了，因为 TextWrapper 有一个固定的宽度，当我改变 Text Element 的宽度时，没有任何变化。嗯，这就是我认为正在发生的事情。