HTML 中 div ul li的排序问题
div：288px*62px图：60px*57px如何排列成这个样子？中间那条横线可以没有~但是两排之间上下一定要有间隔~不知道为什么我排出来之后要不就文字之间没有间隙几...
div：288px * 62px图：60px * 57px如何排列成这个样子？ 中间那条横线可以没有~ 但是两排之间上下一定要有间隔~ 不知道为什么 我排出来之后 要不就文字之间没有间隙几个li紧紧的挤在一起~ 要不就出格~ 怎么排 也排不出这种效果 求大神帮忙~
展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul li{
list-style: none;
}
ul{ margin:0px; padding:0px; }
.aa li{line-height: 30px;
height: 30px;
float: left;
text-align: center;
width: 75px;}
.a1{ border-bottom:1px #000000 solid;}
.aa{width:288px; height:62px; border :1px #000000 solid;}
</style>
</head>
<body>
<div class="aa"><img width="60" height="57" style="float:left;" src="https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/5cbb637a68313930301405.jpg"/>
<ul>
<li class="a1">111</li>
<li class="a1">222</li>
<li class="a1">333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
</body>
</html>
追问
谢谢
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div{height:62px; overflow:hidden}
li{float:left; height:40px} 高度自己调试
<div>
<div>图片</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>懒得打太多字了，其它CSS代码你应该都会写了
原理就是提高li的高度，使它们之间产生想要的间距，然后最外边的div是定义了高度和溢出，所以会隐藏第二行li的溢出高度。如果想要中间的横线，可以在li上加border-bottom
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用table啊，简单方便。干嘛一定要div ul li?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
