微信小程序的button按鈕設置寬度無效


親,你是不是也遇到了微信小程序的button按鈕設置寬度無效。讓我來告訴你怎么弄

方法1.

樣式中加入!important,即:width: 100% !important;

wxss代碼示例

.login-btn {
    font-size: 16px;
    width: 100% !important;
    font-weight: 400;
    color: #fff;
    border-radius: 4px;
    border:1px solid rgba(254,50,50,1);
    background:linear-gradient(180deg,rgba(241,94,94,1) 0%,rgba(222,62,62,1) 100%);
}

  wxml代碼示例:

<button class="login-btn" bindclick="login">登錄</button>

 效果如下圖哦親。  

 

方法2.

標簽內,使用style

wxml代碼示例:

<button class="login-btn" bindclick="login" style="width:100%">登錄</button>

  

方法3.

刪除app.json的配置"style": "v2",不過這個不推薦哦,親

方法2、方法3參考:https://blog.csdn.net/Echo_cxl/article/details/104783105

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM