1. 程式人生 > >ul+li實現類似table的自適應寬度佈局

ul+li實現類似table的自適應寬度佈局

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

效果如下: