为什么要使用UL和LI？
[问题点数：100分，结帖人myr_2002]
为什么要使用UL和LI？
[问题点数：100分，结帖人myr_2002]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2005年4月 Web 开发大版内专家分月排行榜第二2008年4月 Web 开发大版内专家分月排行榜第二2008年3月 Web 开发大版内专家分月排行榜第二
2005年3月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&看下css代码:
这段代码还是存在很多问题的，由于本身ul和li在火狐和IE两个浏览器中兼容不是很好，所以这里虽然做了兼容处理但是还是不可能一模一样，请大家谅解也请高手帮忙改进。
全部代码：
/*产品展示列表Start*/.cplist{&list-style:/*列表样式清除*/&margin:0&padding:5px 0&line-height:1.8em!/*列表行火狐*/&line-height:2/*列表行ie*/&margin-bottom:20}.cplist img{/*设置图片边框*/&padding:2px 2&border:1}.cplist li{&width:151/*图片宽度*/&display:/*所有图片一行显示，超出宽度后换行*/&float:/*元素左浮动*/&margin-left:17px!&margin-left:12&margin-top:10}.cplist li span{&float:&width:151/*设置文字行的最大宽度*/&overflow:/*超出内容隐藏*/&text-align:/*文字居中*/&height:20}/*产品展示列表End*/
&ul class="cplist"&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&&li&&img src="images/chanpin.jpg" alt="" /&&span&图片标题&/span&&/li&&&&&/ul&
最后说明一点，请将ul外部使用div并设置宽度，这样整个的图片列表就做好了，大家只需要根据自己的图片大小和div的大小调整css代码中的数值就可以了。不明白的给我留言吧
阅读(1993)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_094',
blogTitle:'[原创]一个UL和LI写出来的简单的图片列表给新手学习，高手请指正！',
blogAbstract:'声明：原创内容拒绝转载\n看下html代码:\n\n&看下css代码:\n\n&\n效果：\n\n',
blogTag:'span,liimg,chanpin,images,src',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:3,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}列表中li标签设置margin在IE6和IE7中第一个行失效的解决方法
在做列表文章的时候，我们经常会用ul,li标签实现，但是如下图所示第一行出了点问题。在IE6、IE7中li的第一行相对于下方的靠左，而在IE8，FF正常。
静态代码如下：
css代码如下：
&.row2-left{float: width:240
height:200 border:#CCCCCC 1}
&.row2-left h1{background:
url(../images/item2.gif) left top no- padding-left:8}
&.row2-left ul{color:#333333; padding-top:5
&.row2-left ul li{height:25
line-height:25 background:url(../images/arrow.gif) left
no-padding-left:14margin-left:10}
解决方法一：
在ul中加上属性width:240
解决方法二：
把li标签中的margin-left:10移到ul标签中。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。FED实验室 - 专注WEB端开发和用户体验
> 深入CSS属性(六)：margin
一、属性介绍
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比计算的外边距。
inherit 规定应该从父元素继承外边距。
二、常见问题
1.IE6下浮动元素双倍边距问题
解决方法：
IE6中设置block元素display:
.l{margin-left:20float:display:}
原因：首先，inline元素和inline-block元素是没有双倍边距的。对inline元素设置float后，会有个haslayout,使inline元素具有inline-block元素的特性，进而可以设置垂直margin、padding、width、height。
2.margin外边距合并问题
外边距的合并发生在以下三种情形：
情形一：空块元素
a)如果一个块级元素没有border、padding、inline content、height、min-height来分隔，设置margin-top和margin-bottom属性后会合并,
&style type="text/css"&
body{margin:0;}
.out{width:400border:1px solid #f00;margin:0background-color:#}
.inner{margin-top:40margin-bottom:40}
&div class="out"&
&div class="inner"&&/div&
从上例可以看出，最后.out computed height为40
&=IE8、Firefox、Chrome测试效果相同。但是有个疑问，去掉out的边框后，其高度计算为0，不知道什么原因？
情形二：父元素与第一个或最后一个子元素
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔，或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔，那么外边距会合并。
&style type="text/css"&
body{margin:0;}
.parent{border:1px dotted #width:400}
.outer{height:50background-color:#f00;margin-top:40margin-bottom:40}
.inner01{margin-top:20background:#00f;}
.inner02{margin-bottom:60background:#f0f;}
&div class="parent"&
&div class="outer"&
&div class="inner01"&inner01&/div&
&div class="inner02"&inner02&/div&
&=IE6,FF,Chrome效果效果相同，此时inner01的margin-top:并没有起作用，这就是为什么很多人在网上问，我设置margin-top,margin-bottom不起作用的原因了！如下图：
情形三：毗邻的元素
&style type="text/css"&
.ulist{margin:0;padding-left:0;list-style:width:200margin:0border:1px solid #f00;}
.ulist li{padding-left:0;margin:10border:1px dotted #f00;}
&ul class="ulist"&
&li&列表一&/li&
&li&列表二&/li&
&li&列表三&/li&
&=IE6,FF,Chrome效果效果相同,重叠部分的取值为margin-top,margin-bottom中的最大值。如下图：
此时我们看到重叠也有重叠的好处
注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
3.margin不起作用的情况？
行内(inline)元素设置垂直margin不起作用，块级元素的margin不好用时，建议使用padding来代替。
三、常见margin负值应用
1.IE6背景半透明效果按钮的制作
其就是使用margin负值定位实现按钮下半部分的颜色
2.新闻列表(带日期的)
这个是从新浪博客首页看到的实现新闻列表
&li&new01&span class="date"&&/span&&/li&
&li&new02&span class="date"&&/span&&/li&
&li&new03&span class="date"&&/span&&/li&
&li&new04&span class="date"&&/span&&/li&
ul li{height:24line-height:24}
设置.date{text-align:display:margin-top:-24},这时就不需要使用浮动来布局了
3.在选项卡等边框线的处理
当前选中的选项卡下边框颜色要设置选中色同时，内容的div上边框要设置margin-top:-1
4.图片与文字对齐问题
vertical-align:text-bottom
.img{margin:0 5px -2px 0;}
测试代码：
&style type="text/css"&
body{margin:0;font-size:12font-family:}
.out{width:400border:2px dotted #f00;margin:20
.img{margin:0 5px -2px 0;}
&div class="out"&
&img src="20.png" width="20" height="20" class="img"&Benjamin=前端开发
五、新闻列表边框
当我们使用ul&li写新闻列表需要给li设置下边框时，是不是经常困惑于最后一条会多出一个边框。如果给最后一条单独加个类.last{border-bottom:}
也能实现效果。但是这中写法会有两个弊端，弊端一：单独定义一个css类；弊端二，当我们使用服务器端语言输出数据时，还需要单独判断最后一项，添加calss类。有没有好的解决方法呢？当然有，那就是margin负值！
看看下面实现实例：
&style type="text/css"&
.con{width:200border:1px solid #f00;}
.con ul{overflow:margin:0;padding-left:0;margin-bottom:-1}
.con ul li{line-height:24border-bottom:1px solid #f00;padding-left:10}
&div class="con"&
&li&fdasfd&/li&
&li&fdasfd&/li&
&li&fdasfd&/li&
&li&fdasfd&/li&
&li&fdasfd&/li&
四、参考链接
http://www.w3school.com.cn/css/css_margin_collapsing.asp
下面是「FED实验室」的微信公众号二维码，欢迎扫描关注：
行文不易，如有帮助，欢迎打赏！
oror分享 (0)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Microsoft-官方网站&/title&
&link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/font-awesome-4.6.3/css/font-awesome.css"&
&!-- &link rel="stylesheet" type="text/css" href="style.css"& --&
padding: 0;
margin: 0;
text-decoration:
list-style:
font-size: 15
font-family: "Helvetica Neue",Helvetica,Arial,sans-
min-width: 320
color: #000;
background-color: #
color: #000;
/*header*/
width: 100%;
border-bottom: 1px solid #e6e6e6;
header .container{
width: 90%;
height: 48
flex-direction:
justify-content: space-
align-items:
/*header左边导航nav部分*/
header .nav{
flex-direction:
align-items:
/*导航Logo大小*/
header .logo img{
max-height: 23
/*导航列表部分*/
header .nav&ul{
margin-left: 18
flex-direction:
align-items:
header .nav-content{
padding: 0 1.5
line-height: 48
header .nav-content:hover{
background-color: #f2f2f2;
/*二级导航*/
header .nav2{
&div class="container"&
&nav class="nav"&
&a class="logo" href="#"&
&img src="imgs/microsoft.png"&
&a class="nav-content" href="#"&
&i class="fa fa-angle-down"&&/i&
&ul class="nav2"&
&a href="#"&微软官方商城&/a&
&a href="#"&寻找店铺&/a&
&a class="nav-content" href="#"&
&i class="fa fa-angle-down"&&/i&
&a class="nav-content" href="#"&
&!-- &div class="header-right"&
&div class="search"&
&input type="input" name="search" placeholder="在Microsoft.com中搜索"&
&button class="fa fa-search" type="button"&&/button&
&a href="#"&&i class="fa fa-shopping-cart"&&/i&&/a&
&a href="#"&登录&/a&
&/div& --&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
logo的a标签和下面的ul是兄弟节点。你选择器应该用class或者id标识，而不是选择所有的a。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为在 a 中嵌套的 ul 下面还嵌套了 a，因此会造成点击的href冲突，浏览器认为这是不符合HTML语义的，将之当成错误的标签而进行了自动更正。把 ul 下面的 li 中的 a 去掉就可以了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
a里面嵌套一个a，你想下点击的时候应该跳哪去？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。