With dispaly: flex writing input

layout:

<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>
                                            
                                          )
                                      }) 
                                 } 
                              </ The Select> 
                       </ span> 
                   </ div> 

                   <div style className = {} = {{Styles.itme the paddingTop: '7px'}}> 
                       <span Styles.control className = {}> 
                          <Checkbox> Show 0 inventory items </ Checkbox> 
                       </ span> 
                   </ div> 

            </ div> 
style:
.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;
               
           }
        }
    }

 

  

Guess you like

Origin www.cnblogs.com/zmz-com/p/11670798.html