面对下面这种布局，该如何下手呢？
要求格子间需要有红色线条分隔，实在没有想出头绪 >,_,<
红颜莎娜浏览 268回答 3
3回答
-
茅侃侃
试试看这样行不行。思路：内部的红色边框用 左边框 和 上边框 实现。解决边框重复宽度翻倍的问题。内容可以横向和纵向自动扩展。（使用其他边框就不方便）整体的左侧和上边的边框通过给父元素设置 margin-left, margin-top -1px 来隐藏掉。1px 是边框的宽度。 -
HUWWW
<!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
<!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>
随时随地看视频慕课网APP
Html/CSS