用dispaly:flex 书写input

Posted 2020-11-16 zmz-com

布局：

<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;
               
           }
        }
    }