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

原创 2016年06月01日 15:05: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>

效果如下:


相关文章推荐

ul li+ css 实线表格

ul li实线Table .ultable { width: 600px; } .ultable ul { margin-top: 0; margin-bottom: 0; ...

ul li实现table效果

tag 姓名 身份证号 与户主关系 阿三 3-1 13...

漂亮的css ul li table(表格)兼容IE8,IE9,FF21

项目中用到一个表格,现在提取出来。在IE6下面有点问题; 纯div ul li css 实现的table表格效果。带滚动条 IE8,IE9效果图: FF效果: IE6效果有点问题: ...

ul和li实现分两列(多列)布局显示

简单语句实现DIV+CSS分两列(多列)布局显示 .my ul { width: 210px; } .my li { width: 100px; /*如果显示三列 则width改为...

横排Li的自适应宽度

我们在做网页导航的时候,最常用的就是让Li左浮,但是浮动对象要给固定宽度,不然在ie下会出现撑开的情况,导航的话没有问题,一般都是两个字或者四个字,固定宽度也比较美观,今天就碰到一个问题是翻页代码用浮...

div ul li 嵌套后解决高度自适应方法

div ul li 嵌套后解决高度自适应办法: html代码如下 daugli-1webServer-1web Server   CSS代码如下: .main_div {  width:80...
  • baicp3
  • baicp3
  • 2013年10月19日 20:22
  • 14106

设置 li自适应宽度

原文:http://hi.baidu.com/yingjianglinx/item/c2d868fc49a6b15bc9f337e4 1、设置float属性的li里的链接也为float属性//这个属...

div嵌套ul时div的宽度和高度自适应

div中嵌套ul时div的宽度和高度随着ul里元素的变化而变化,下面是一个事例,可以改变li元素的内容和个数去验证: div高度自适应 .adaption{ border:s...

HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法

方法一: div 自适应宽度 很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了 方法二:    div ul li 嵌套后解决高度自适应...

html加载swf,代码模拟点击事件

一、背景 1、最近在做一个android端播放flash的应用,android设备没有屏幕,显示需通过HDMI连接。需要用到javascript与java之间的交互,android端接收flash传过...
  • Moruna
  • Moruna
  • 2014年06月19日 17:34
  • 3843
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ul+li实现类似table的自适应宽度布局
举报原因:
原因补充:

(最多只允许输入30个字)