微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

用dispaly:flex 书写input

布局:

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

 

  

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐