ul+li實現類似table的自適應寬度佈局
阿新 • • 發佈:2019-02-10
<div class="cart-panel"> <div class="hd"> <ul class="order-title"> <li class="product">商品名稱</li> <li class="market-price">市場價</li> <li class="order-price">訂購價</li> <li class="num">數量</li> <li class="operate">操作</li> </ul> </div> <div class="bd"> <ul class="order-list"> <li class="img-box"><a href="/product/9010966.html" target="_blank"><img src="http://img01.hua.com/uploadpic/newpic/9010966.jpg_80x87.jpg" height="56" width="50"></a></li> <li class="product"> <a href="/product/9010966.html" target="_blank"> <span class="product-title">[鮮花]一往情深一精品玫瑰禮盒:19枝紅玫瑰,勿忘我適量</span> <span class="feature"></span> </a> </li> <li class="market-price"> <span class="price-sign">¥</span> <span class="price-num">329</span> </li> <li class="order-price"> <span class="price-sign">¥</span> <span class="price-num">239</span> </li> <li class="num"> <div class="input-num"> <a href="javascript:SetNum('Q_2708','minus');" class="btn btn-default"><i class="ico ico-minus"></i></a> <input type="text" class="form-control input-sm" Name="Q_2708" id="Q_2708" value="1" onChange="$('#form1').submit();"> <a href="javascript:SetNum('Q_2708','add');" class="btn btn-default"><i class="ico ico-add"></i></a> </div> </li> <li class="operate"><a href="ShowCart.asp?delID=9010966&MySelf=Yes&Product_code=9010966">刪除</a><br><a href="javascript:DoGuanZhu('9010966')">移到我的關注</a></li> </ul> </div>
效果如下: