布局：
<div className={Styles.filterbox}> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'210px'}}> <Input placeholder="请输入物品名称/品牌" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control} style={{ width:'150px'}}> <Input placeholder="批号" /> </span> </div> <div className={Styles.itme}> <span className={Styles.control}> <span className={Styles.label}>有效期至：</span> <DatePicker dateRender={current => { const style = {}; if (current.date() === 1) { style.border = '1px solid #1890ff'; style.borderRadius = '50%'; } return ( <div className="ant-calendar-date" style={style}> {current.date()} </div> ); }} /> </span> </div> <div className={Styles.itme}> <span className={Styles.control}> <span className={Styles.label} onClick={()=>{this.onClick()}} >选择仓库：</span> <Select style={{width:"180px"}} value={0} > { housesbody.map((item,key)=> { return ( <Option value={0} key={key}>{item.name}</Option> ) }) } </Select> </span> </div> <div className={Styles.itme} style={{ paddingTop:'7px'}}> <span className={Styles.control}> <Checkbox>显示0库存物品</Checkbox> </span> </div> </div>样式：
.filterbox{ margin-bottom: 20px; width:1240px; display:flex; margin-top:35px; margin-bottom: 30px; box-sizing: border-box; flex-flow: row nowrap; position: relative; .itme{ margin-right: 20PX; .control{ display: flex; flex-direction: row; } .label{ margin-right: 5px; color: #6c757d; font-size: 12px; line-height: 32px; } } }
来源：博客园
作者：张花花
链接：https://www.cnblogs.com/zmz-com/p/11670798.html