Flexbox调整复选框的大小(太小)

作者：kikokikolove | 2023-09-10 15:08

如何解决《Flexbox调整复选框的大小(太小)》经验，为你挑选了1个好方法。

我有一个带有复选框的HTML公式列表.所有复选框都有一个标签.

.filter-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-list input[type=checkbox] {
    margin-right: 2rem;
    height: 20px;
    width: 20px;
}



我用flexbox设计这个公式.使用flexbox使其中一个复选框比其他复选框小.原因似乎是,该复选框的标签文本太长了,需要将其包装在下一行中.这是我的CSS(使用SCSS):


    
    Hochschule


    
    Angewandte Ingenierwissenschaften


    
    Bauen & Gestalten


    
    BWL


    
    Informatik


    
    Logistik


一张图片描绘了千言万语(首先是flexbox,第二张没有):





当然这里是一个演示;)http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

有人知道如何解决这个问题吗？

干杯,大卫


1> KCarnaille..：
添加输入:

flex: 1;


对于标签:

flex: 2; 


它适用于chrome,firefox,IE.

        
我能够在`label`上只用`flex:1`来实现我想要的布局



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        域对象,工厂和存储库之间的依赖关系
                    

                    
                                                
                        如何解决《域对象,工厂和存储库之间的依赖关系》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        检查是否在芹菜任务
                    

                    
                                                
                        如何解决《检查是否在芹菜任务》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        C++:基类中的String参数在派生类解构时解构
                    

                    
                                                
                        如何解决《C++:基类中的String参数在派生类解构时解构》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在Maven中替换文件的正确方法是什么？
                    

                    
                                                
                        如何解决《在Maven中替换文件的正确方法是什么？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在OCaml中创建大量线程？
                    

                    
                                                
                        如何解决《如何在OCaml中创建大量线程？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        我可以将谷歌博客网站嵌入我的网站
                    

                    
                                                
                        如何解决《我可以将谷歌博客网站嵌入我的网站》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        检测未初始化对象的类型
                    

                    
                                                
                        如何解决《检测未初始化对象的类型》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        当gulp为应用程序提供服务时,如何在webstorm中调试Javascript
                    

                    
                                                
                        如何解决《当gulp为应用程序提供服务时,如何在webstorm中调试Javascript》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        从Android的LocationManager请求getLastKnownLocation时为空指针
                    

                    
                                                
                        如何解决《从Android的LocationManager请求getLastKnownLocation时为空指针》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        测试列表中所有成员之间的相等性
                    

                    
                                                
                        如何解决《测试列表中所有成员之间的相等性》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        logback没有找到maven的属性project.build.directory
                    

                    
                                                
                            
                        
                                                
                        如何解决《logback没有找到maven的属性project.build.directory》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        x*log(x)与x ^ a有一个渐近极限,其中a是(1,2)？
                    

                    
                                                
                        如何解决《x*log(x)与x^a有一个渐近极限,其中a是(1,2)？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Lua脚本从Redis HGETALL调用返回高效字典
                    

                    
                                                
                        如何解决《Lua脚本从RedisHGETALL调用返回高效字典》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        HTML表单:POST一个对象数组
                    

                    
                                                
                        如何解决《HTML表单:POST一个对象数组》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        用Observable和Immutable改变检测
                    

                    
                                                
                            
                        
                                                
                        如何解决《用Observable和Immutable改变检测》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        多线程环境中的基准标记
                    

                    
                                                
                        如何解决《多线程环境中的基准标记》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Excel到宏小数分隔符的剪贴板
                    

                    
                                                
                        如何解决《Excel到宏小数分隔符的剪贴板》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用唯一索引索引列表
                    

                    
                                                
                        如何解决《使用唯一索引索引列表》经验，为你挑选了4个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        MVC路由问题:空条目
                    

                    
                                                
                        如何解决《MVC路由问题:空条目》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何将curl上传进度发送到要显示的ajax
                    

                    
                                                
                        如何解决《如何将curl上传进度发送到要显示的ajax》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "CAO" !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
























    

    
        
            
            
                
                    
                
            

            
                kikokikolove            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    ajax
                
                                
                    bootstrap
                
                                
                    chart
                
                                
                    chrome
                
                                
                    css
                
                                
                    css3
                
                                
                    firebug
                
                                
                    firefox
                
                                
                    html
                
                                
                    html5
                
                                
                    javascript
                
                                
                    jquery
                
                                
                    json
                
                                
                    node.js
                
                                
                    npm
                
                                
                    postman
                
                                
                    vue.js
                
                                
                    webkit
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1[String]和Array <String>之间的区别
                
                                
                    2什么是logits,softmax和softmax_cross_entropy_with_logits？
                
                                
                    3"没有命名类型"简单程序错误
                
                                
                    4使用Flask + SqlAlchemy仅创建一个表
                
                                
                    5UWP页面导航标识符
                
                                
                    6.htaccess使用GET参数重定向
                
                                
                    7了解警告:将r值绑定到l值引用
                
                                
                    8安装Visual Studio 2015时遇到困难(Microsoft Windows更新(KB2999226))
                
                                
                    9在Swift中创建随机Bool
                
                                
                    10如何反应原生作品？
                
                                
                    11Python  - 无法用"getenv("APPDATA")"找到"文件"？
                
                                
                    12MVVM:查看导航无法正常工作
                
                                
                    13WFLYEJB0043：计时器[timer]的先前执行仍在进行中，在[time]处跳过了此重叠的计划执行
                
                                
                    14SAS存储过程的XML语法
                
                                
                    15Scala用if else返回布尔值
                
                                
                    16从.aar文件Android中提取代码
                
                                
                    17AWS Beanstalk docker镜像自动更新不起作用
                
                                
                    18Snippet在VS2015中插入了额外的换行符
                
                                
                    19列表视图元素的操作溢出菜单
                
                                
                    20使用Java获取MySQL版本