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`来实现我想要的布局



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        ColdFusion中的UTF-8标志
                    

                    
                                                
                        如何解决《ColdFusion中的UTF-8标志》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在循环中使用Jsoup connect().第一个请求总是比其他所有请求慢得多
                    

                    
                                                
                        如何解决《在循环中使用Jsoupconnect().第一个请求总是比其他所有请求慢得多》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用参数'()'和找不到关键字参数'{}来反向'login'.尝试过0种模式:[]
                    

                    
                                                
                        如何解决《使用参数'()'和找不到关键字参数'{}来反向'login'.尝试过0种模式:[]》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在Visual Studio 2015中添加SSDT BI模板
                    

                    
                                                
                        如何解决《在VisualStudio2015中添加SSDTBI模板》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在同一个php脚本中销毁两个不同的会话？
                    

                    
                                                
                        如何解决《如何在同一个php脚本中销毁两个不同的会话？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在excel vba中加入从两个不同数据源创建的两个记录集
                    

                    
                                                
                            
                        
                                                
                        如何解决《如何在excelvba中加入从两个不同数据源创建的两个记录集》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何从RasterBrick中提取数据？
                    

                    
                                                
                        如何解决《如何从RasterBrick中提取数据？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用图层列表显示一些可绘制的图像
                    

                    
                                                
                        如何解决《使用图层列表显示一些可绘制的图像》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何使用Dot在GraphViz中的标签中使用？
                    

                    
                                                
                            
                        
                                                
                        如何解决《如何使用Dot在GraphViz中的标签中使用？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        python中有序字典的有序字典
                    

                    
                                                
                        如何解决《python中有序字典的有序字典》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Android Google Plus API  -  PeopleApi.loadConnected返回0个人
                    

                    
                                                
                        如何解决《AndroidGooglePlusAPI-PeopleApi.loadConnected返回0个人》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Mongoose模式方法是"不是函数"
                    

                    
                                                
                        如何解决《Mongoose模式方法是"不是函数"》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        检查Javascript中是否存在活动超时
                    

                    
                                                
                        如何解决《检查Javascript中是否存在活动超时》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        ol.overlay未正确设置位置
                    

                    
                                                
                        如何解决《ol.overlay未正确设置位置》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Swift 2和Linux/OS X的区别
                    

                    
                                                
                        如何解决《Swift2和Linux/OSX的区别》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        无法导入flup.server.fcgi
                    

                    
                                                
                        如何解决《无法导入flup.server.fcgi》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        CSS转换比例允许的最大小数位数？
                    

                    
                                                
                        如何解决《CSS转换比例允许的最大小数位数？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Xamarin  -  Android  -  Visual Studio  - 无法启动应用程序
                    

                    
                                                
                            
                        
                                                
                        如何解决《Xamarin-Android-VisualStudio-无法启动应用程序》经验，为你挑选了4个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Java中的大数字计算？
                    

                    
                                                
                        如何解决《Java中的大数字计算？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        从iOS Share Extension获取PHAsset
                    

                    
                                                
                        如何解决《从iOSShareExtension获取PHAsset》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "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函数uasort在PHP 5.5和PHP 7.0中的不同行为
                
                                
                    2我们应该如何实现对象类型的移动？
                
                                
                    3BeautifulSoup中的select方法无法用空格选择属性值
                
                                
                    4如何处理谷歌地图上的触摸事件(MapFragment)？
                
                                
                    5C#Hook全局键盘事件 -  .net 4.0
                
                                
                    6区分相同类型的异常
                
                                
                    7jQuery第3级导航未按预期工作
                
                                
                    8超薄3:如何访问设置？
                
                                
                    9在内存中格式化SyntaxTree的最佳方法是什么？
                
                                
                    10C++结构值初始化
                
                                
                    11为什么MixedGrailsControllerHelper.executeAction()占用了这么多时间？
                
                                
                    12MSIL源代码的编译器在哪里驻留在.NET Framework中？
                
                                
                    13如何覆盖类方法
                
                                
                    14Codeigniter会话在Live Server上不起作用
                
                                
                    15计算年龄JavaScript
                
                                
                    16如何在Kafka中测试日志压缩是否有效？
                
                                
                    17更新注释视图时如何在自定义注释引脚中执行动画
                
                                
                    18为什么在条件运算符中使用charAt时,我的输出完全不同
                
                                
                    19如何处理子类对象属性的__clone
                
                                
                    20如何将枚举转换为QString？