ul+li实现类似table的自适应宽度布局

来源：互联网发布：图像压缩算法动态规划编辑：程序博客网时间：2024/06/08 12:40

<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>

效果如下：

0 0