<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="format-detection" content="telephone=no"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="format-detection" content="telephone=no"/> <meta name="msapplication-tap-highlight" content="no"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <title>测试html</title> <style type="text/css"> *{ margin: 0; padding: 0; } .goods { display: -ms-flexbox; display: flex; width: 100%; overflow: hidden; } .goods .menu-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 80px; flex: 0 0 80px; width: 80px; background: #7de2ff; } .goods .foods-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } </style> </head> <body> <div class="goods"> <div class="menu-wrapper"> <ul> <li><span>热销榜</span></li> <li><span>热销榜</span></li> <li><span>热销榜</span></li> <li><span>热销榜</span></li> <li><span>热销榜</span></li> <li><span>热销榜</span></li> <li><span>热销榜</span></li> </ul> </div> <div class="foods-wrapper"> <ul> <li> <div class="content"><h2 class="name">皮蛋瘦肉粥</h2> <p class="desc">咸粥</p> <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div> <div class="price"><span class="now">￥10</span> <span class="old">￥14</span></div> </div> </li> <li> <div class="content"><h2 class="name">皮蛋瘦肉粥</h2> <p class="desc">咸粥</p> <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div> <div class="price"><span class="now">￥10</span> <span class="old">￥14</span></div> </div> </li> <li> <div class="content"><h2 class="name">皮蛋瘦肉粥</h2> <p class="desc">咸粥</p> <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div> <div class="price"><span class="now">￥10</span> <span class="old">￥14</span></div> </div> </li> </ul> </div> </div> </body> </html>
