猿问

面对下面这种布局，该如何下手呢？

要求格子间需要有红色线条分隔，实在没有想出头绪 >,_,<

红颜莎娜
浏览 268回答 3
3回答

茅侃侃

试试看这样行不行。思路：内部的红色边框用 左边框 和 上边框 实现。解决边框重复宽度翻倍的问题。内容可以横向和纵向自动扩展。（使用其他边框就不方便）整体的左侧和上边的边框通过给父元素设置 margin-left, margin-top -1px 来隐藏掉。1px 是边框的宽度。
0

HUWWW

<!DOCTYPE HTML><html><head><title>layout</title><style>*{padding:0;margin:0;}.wrap{width:960px;margin:200px;}.wrap ul{&nbsp; &nbsp; width:410px; /*与li相关*/&nbsp; &nbsp; background:white;/**/&nbsp; &nbsp; overflow:hidden; /*隐藏被拉出的部分（主要是边框部分）*/&nbsp; &nbsp; /*outline:1px solid red;/*测试查看*/}ul li{&nbsp; &nbsp; list-style:none;&nbsp; &nbsp; height:100px;&nbsp; &nbsp; width:100px;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; display:inline-block; /*or float:left*/&nbsp; &nbsp; *float:left;&nbsp; &nbsp; border-top: 2px solid #090; /*is different from border,here ,the outline is any value;*/&nbsp; &nbsp; border-left: 2px solid #090;&nbsp; &nbsp; margin:-5px;&nbsp; &nbsp; /*margin:-5px 0 0 -5px; /*attention:............hide the top and left at the li*/&nbsp; &nbsp; padding:1px; /*适当的边距，ul的width大小与li的width、margin、margin适当*/&nbsp; &nbsp; background:white;/**/&nbsp; &nbsp; line-height:6;}ul li a{&nbsp; &nbsp; height:100%;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; display:block;&nbsp; &nbsp; 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>
0

梦里花落0921

<!DOCTYPE html><html><head>&nbsp; &nbsp; <title>test</title></head><style>*{margin:0;padding:0;}li{list-style:none;}.wrap{&nbsp; &nbsp; margin:20px ;&nbsp; &nbsp; width:346px;&nbsp; &nbsp; height: 346px;&nbsp; &nbsp; overflow:hidden;}.wrap ul{&nbsp; &nbsp; margin: -13px 0 0 -13px;&nbsp; &nbsp; width: 380px;&nbsp; &nbsp; overflow:hidden;}.wrap ul li{&nbsp; &nbsp; float:left;&nbsp; &nbsp; width:100px;&nbsp; &nbsp; height:100px;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; border-top:3px solid #ee3300;&nbsp; &nbsp; border-left:3px solid #ee3300;}.wrap ul li span{&nbsp; &nbsp; display:block;&nbsp; &nbsp; height:100px;&nbsp; &nbsp; background-color:#FFCFBF;}</style><body>&nbsp; &nbsp; <div class="wrap">&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span>test</span></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答