要求格子间需要有红色线条分隔，实在没有想出头绪 >,_,<
3 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
试试看这样行不行。
思路：
内部的红色边框用 左边框 和 上边框 实现。解决边框重复宽度翻倍的问题。内容可以横向和纵向自动扩展。（使用其他边框就不方便）
整体的左侧和上边的边框通过给父元素设置 margin-left, margin-top -1px 来隐藏掉。1px 是边框的宽度。
HUWWW
TA贡献1874条经验 获得超12个赞
<!DOCTYPE HTML>
<html>
<head>
<title>layout</title>
<style>
*{padding:0;margin:0;}
.wrap{width:960px;margin:200px;}
.wrap ul{
width:410px; /*与li相关*/
background:white;/**/
overflow:hidden; /*隐藏被拉出的部分（主要是边框部分）*/
/*outline:1px solid red;/*测试查看*/
}
ul li{
list-style:none;
height:100px;
width:100px;
text-align:center;
display:inline-block; /*or float:left*/
*float:left;
border-top: 2px solid #090; /*is different from border,here ,the outline is any value;*/
border-left: 2px solid #090;
margin:-5px;
/*margin:-5px 0 0 -5px; /*attention:............hide the top and left at the li*/
padding:1px; /*适当的边距，ul的width大小与li的width、margin、margin适当*/
background:white;/**/
line-height:6;
}
ul li a{
height:100%;
width:100%;
text-align:center;
display:block;
margin:auto 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
<li><a href="#">li</a></li>
</ul>
</div>
</body>
</html>
梦里花落0921
TA贡献1772条经验 获得超5个赞
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.wrap{
margin:20px ;
width:346px;
height: 346px;
overflow:hidden;
}
.wrap ul{
margin: -13px 0 0 -13px;
width: 380px;
overflow:hidden;
}
.wrap ul li{
float:left;
width:100px;
height:100px;
padding:10px;
border-top:3px solid #ee3300;
border-left:3px solid #ee3300;
}
.wrap ul li span{
display:block;
height:100px;
background-color:#FFCFBF;
}
</style>
<body>
<div class="wrap">
<ul>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
<li><span>test</span></li>
</ul>
</div>
</body>
</html>
- 3 回答
- 0 关注
- 249 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消