微信小程序小型按钮内文字布局变形

.DingQ.

于 2022-04-28 22:20:28 发布

阅读量857

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_45465743/article/details/124484987

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何通过在HTML按钮上添加'mini'类型属性解决按钮大小过小导致内容布局问题，重点在于调整字体和内容展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<button id="btn" type="warn">搜索</button>

#btn{
    width: 50px;
    height: 24px;
    border-radius: 24px;
    background-color: red;
    color: white;
    font-size: 14px;
    display:flex;
    align-items: center;
    justify-content: center;
}

这样做出的按钮中的字布局就是变形的，这时只用在button中加个类型就可以了

size="mini"

如果按钮过小内容还是会一列显示