css - 如何使用 css 将两个 div 彼此相邻放置在另一个 div 中？

Question

我在 div 标签和另一个 div 标签中有一个 labelname 及其值，我添加了一个按钮。我希望标签名称、它的值和按钮位于同一行或同一行。下面是我的代码打字稿和反应。

render = () => {
    return (
        <Wrapper>
          <Count>
          <SpanComponent>
            Counter value
          </LabelComponent>
          <SpanComponent
            color={
              counter === 0
                ? 'red'
                : counter === 1
                ? 'blue'
                : 'green'
            }
          >
            {' '}
            {counter}
          </SpanComponent>
          </Count>
          <ButtonWrapper>
            <Button>
              Button
            </Button>
          </ButtonWrapper>
        </Wrapper>

    )
}

const ButtonWrapper = styled.div`
    display: flex;
    justify-content: flex-end;

`;

const LabelComponent = styled.span<Props>`
    margin: 0;
    padding: 0;
    line-height: ${props => props.lineh || 1.5};
    text-align: ${props => props.align || 'initial'};
`;

使用上面的代码，它看起来像下面，

有人可以帮我将标签名称、值和按钮放在同一行...如下所示，

Counter value 0                       Button

谢谢。

标签： cssreactjstypescript

Answer 1

尝试 display: inline-block 子元素