html - 如何使我的网页上的元素位于其容器的相对两侧，而不是彼此相邻？

Question

单词和按钮在左侧紧挨着。我怎样才能让单词留在左边而按钮留在右边？

页面图片如下。

这是一个用 React 编写的页面。

问题出在Accordian.Header容器中的某个地方。如果您删除它，元素会根据需要保留在其容器的相对两侧。

    <MainScreen title='Welcome Back Anthony!'>
            <Button style={{ marginLeft: 10, marginBottom: 6 }} size='lg'>
                Create New Note
            </Button>
            {notes.map((note) => (
            <Accordion>
            <Accordion.Item>
                    <Card style={{ margin: 10 }} key={note._id}>
                    <Accordion.Header style={{ width: '100%'}}>
                        <Card.Header style={{ display: 'flex' }}>
                        <span
                            style={{
                            color: 'black',
                            textDecoration: 'none',
                            flex: 1,
                            cursor: 'pointer',
                            alignSelf: 'center',
                            fontSize: 18,
                        }}
                        >
                        <div as={Card.Text}
                        variant='link'
                        eventKey='0'>
                        {note.title}
                        </div>
                    </span>
                <div>
                    <Button href={`/note/${note._id}`}>Edit</Button>
                    <Button
                    variant='danger'
                    className='mx-2'
                    onClick={() => deleteHandler(note._id)}
                    >
                    Delete
                    </Button>
                </div>
                </Card.Header>
                </Accordion.Header>
                <Card.Body>
                <Accordion.Body>
                    <h4>
                        <Badge variant='success'>
                            Category - {note.category}
                        </Badge>
                    </h4>
                    <blockquote className='blockquote mb-0'>
                        <p>
                            {note.content}
                        </p>
                        <footer className='blockquote-footer'>
                            Created on - date
                        </footer>
                    </blockquote>
                    </Accordion.Body>
                </Card.Body>
                </Card>
            </Accordion.Item>
            </Accordion>
            ))}

    </MainScreen>

标签： htmlreactjsjsx