菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <style> .btn-group button { background-color:#4CAF50; /* Green background */ border:1px solid green; /* Green border */ color:white; /* White text */ padding:10px 24px; /* Some padding */ cursor:pointer; /* Pointer/hand icon */ float:left; /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */ .btn-group:after { content:""; clear:both; display:table; } .btn-group button:not(:last-child) { border-right:none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color:#3e8e41; } </style> <h1>按钮组</h1> <p>两个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:50%">Apple</button> <button style="width:50%">Sony</button> </div> <p>三个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:33.3%">Apple</button> <button style="width:33.3%">Samsung</button> <button style="width:33.3%">Sony</button> </div> <p>四个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:25%">Apple</button> <button style="width:25%">Samsung</button> <button style="width:25%">Sony</button> <button style="width:25%">HTC</button> </div> </body> </html>
运行结果