Html 在语义UI中，将一个项与另一个项对齐

大家好，我正在为我的项目使用语义UI React。在这里，我在一个模态上呈现一些内容。在这里，你可以搜索电影，点击add，它会添加到下面。问题是我希望电影列表与搜索栏的开头对齐。我做不到。使用

Grid

有什么方法可以实现它吗

这是我的密码：

    import React, {useState, useEffect} from 'react';
import {Icon, Button, Modal, Input, Item} from 'semantic-ui-react'

const CreateMovieListModal = (props) => {

    const [movieTitle, setMovieTitle] = useState('');
    const [movieList, setMovieList] = useState([]);

    function handleMovieChange (event, data) {
        setMovieTitle(data.value);
    }

    function addMovie () {
        const newMovies = [...movieList, movieTitle];
        setMovieList(newMovies);
        setMovieTitle('');
    }

    function showMovieList () {
        return movieList.map((currentMovie)=> {
        return (
            <Item.Group>
                <Item>
                <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />
                <Item.Content verticalAlign='middle'>
                <Item.Header as='a'>{currentMovie}</Item.Header>
                </Item.Content>
                </Item>
            </Item.Group>

        )
        })
    }

    return (
        <Modal open={props.isOpen} onClose={props.onClose}>
            <Modal.Header>Add a new list</Modal.Header>
            <div style={{marginTop: '10px'}}>
                <center>
                    <Input value={movieTitle} loading={false}
                     style={{width: '50%'}} 
                     onChange={handleMovieChange} 
                     placeholder='Search For Movies'
                    />
                    <Button onClick={addMovie}>Add Movie</Button>
                </center>
            </div>

            <Modal.Content scrolling>
                <div>
                    {showMovieList()}
                </div>


            </Modal.Content>
            <Modal.Actions>
                <Button primary>
                    Save <Icon name='save' />
                </Button>
            </Modal.Actions>
        </Modal>
    );
};

export default CreateMovieListModal;

import React，{useState，useffect}来自“React”；
从“语义ui反应”导入{图标、按钮、模式、输入、项目}
const CreateMovieListModal=（道具）=>{
const[movieTitle，setMovieTitle]=使用状态（“”）；
常量[movieList，setMovieList]=useState（[]）；
函数handleMovieChange（事件、数据）{
setMovieTitle（data.value）；
}
函数addMovie（）{
const newMovies=[…电影作者，电影字幕]；
setMovieList（新电影）；
setMovieTitle（“”）；
}
函数showMovieList（）{
返回movieList.map（（当前电影）=>{
返回(
{currentMovie}
)
})
}
返回(
添加新列表
添加电影
{showMovieList（）}
拯救
);
};
导出默认CreateMovieListModal；

您需要将输入和电影列表包装到一个div中，并在该包装div上应用您的

：

<center>
  <div> <!-- wrapper div -->          
    <Input value={movieTitle} loading={false}
           style={{width: '50%'}} 
           onChange={handleMovieChange} 
           placeholder='Search For Movies'
           />
    <Button onClick={addMovie}>Add Movie</Button>

    <Modal.Content scrolling>
      <div>
        {showMovieList()}
      </div>
    </Modal.Content>
  </div>
</center>

添加电影
{showMovieList（）}

我想你应该试试