解决：ion-col内的button高度不至（实用，赞）

￡神魔★判官ぃ 2023-05-29 13:29 11阅读 0赞

先上图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
  
html 一行内有多个col, col内有1个button

<ion-row class="row-button row-list" style="margin-top:6px;">
        <ion-col *ngFor="let item of group.Items" col-6 (click)="selected(item)">
            <button ion-item no-lines detail-none>
                <div class="item-text" >{
       {item.text}}</div>
                <div class="item-remark">{
       {item.remark}}</div>
            </button>
         
            <div *ngIf="item.checked" class="button-checked"></div>
         </ion-col>
    </ion-row>

css

/*偿试解决：当有换行时，同一行按钮高度不一致*/
    ion-col {
        display: flex;
    
        button {
            align-self: stretch;
        }
    }

关键点：  
**1、ion-col 设 display: flex;          (用flex布局）   
2、button  设 align-self: stretch;  (撑满)**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106171308642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关超赞的实用前端社区精选？

转载作者：黑马程序员前端链接：https://www.zhihu.com/question/39503897/answer/2998752442 社区精选

Dear 丶/ 2024年03月22日 10:06/ 0 赞/ 167 阅读

相关深入理解Cookie (实用、赞）

原文出处：[https://www.jianshu.com/p/6fc9cea6daa2][https_www.jianshu.com_p_6fc9cea6daa2] 延伸

拼搏现实的明天。/ 2023年07月13日 08:24/ 0 赞/ 122 阅读

相关 umeditor实用封装示例（实用、赞）

网址：[https://github.com/cipchk/ngx-umeditor][https_github.com_cipchk_ngx-umeditor] （已下封装好

我就是我/ 2023年07月04日 14:29/ 0 赞/ 28 阅读

相关 form中button会自动提交的问题（实用，赞）

原文出处：[https://blog.csdn.net/hani\_wen/article/details/88413957][https_blog.csdn.net_hani

小灰灰/ 2023年06月12日 13:26/ 0 赞/ 115 阅读

相关巧用ngStyle动态计算图表的高度（赞，实用）

参考资料： 1、[如何正确使用函数\[ngStyle\]][ngStyle] 先上图： ![watermark_type_ZmFuZ3poZW5naGVpdG

浅浅的花香味﹌/ 2023年05月30日 04:58/ 0 赞/ 156 阅读

相关解决：ion-col内的button高度不至（实用，赞）

先上图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

￡神魔★判官ぃ/ 2023年05月29日 13:29/ 0 赞/ 12 阅读

相关 TimeSpan格式化 (实用、赞）

原文出处：[https://blog.csdn.net/cxb2011/article/details/103538849/][https_blog.csdn.net_cxb2

雨点打透心脏的1/2处/ 2022年12月27日 08:38/ 0 赞/ 267 阅读

相关 em的计算方法(实用、赞）

之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览

红太狼/ 2022年04月15日 05:51/ 0 赞/ 373 阅读

相关用pre标签解决换行、自动高度（实用）

需求：红框的内容从数据库中取出，行数不确定，要求自动调整高度 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

妖狐艹你老母/ 2022年01月17日 02:21/ 0 赞/ 752 阅读

相关实用色轮图（赞、实用）

原文出处：[https://www.jb51.net/photoshop/228718\_2.html][https_www.jb51.net_photoshop_228718

痛定思痛。/ 2021年12月12日 13:45/ 0 赞/ 415 阅读