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; ...
  • kingtentx
  • kingtentx
  • 2014年10月31日 15:03
  • 655

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

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

解决ul高度自适应问题

在使用ul   li布局的时候,会出现ul的高度不能随li的变化而动态拓展高度
  • ROVAST
  • ROVAST
  • 2015年03月30日 14:28
  • 642

li浮动、ul自适应高度

ul {z-index:1;overflow:hidden;} ul li {float:left;}
  • taoliujun
  • taoliujun
  • 2011年09月15日 15:44
  • 308

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

方法一: div 自适应宽度 很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了 方法二:    div ul li 嵌套...
  • feicongcong
  • feicongcong
  • 2017年04月25日 09:06
  • 584

横排Li的自适应宽度

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

移动Web前端开发_横向UL以及自适应屏幕_div定位的方式居中

测试 window.onload=function() { var status=1; ///1表示没有弹出 var Obtn1=document.getElementById...
  • u012997311
  • u012997311
  • 2015年05月03日 09:52
  • 441

li浮动时ul高度为0,解决ul自适应高度的几种方法

在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中会出现ul高度为0的情况,是效果不能达 到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。 ...
  • sd19871122
  • sd19871122
  • 2016年11月25日 20:28
  • 366

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

方法一: div 自适应宽度 很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了 方法二:    div ul li 嵌套后解决高度自适应...
  • qq_16769857
  • qq_16769857
  • 2016年08月23日 10:31
  • 7051

设置 li自适应宽度

原文:http://hi.baidu.com/yingjianglinx/item/c2d868fc49a6b15bc9f337e4 1、设置float属性的li里的链接也为float属性//这个属...
  • haibin_hu
  • haibin_hu
  • 2013年09月06日 10:29
  • 4658
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ul+li实现类似table的自适应宽度布局
举报原因:
原因补充:

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