要求格子間需要有紅色線條分隔，實(shí)在沒有想出頭緒 >,_,<
3 回答
茅侃侃
TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個贊
試試看這樣行不行。
思路：
內(nèi)部的紅色邊框用 左邊框 和 上邊框 實(shí)現(xiàn)。解決邊框重復(fù)寬度翻倍的問題。內(nèi)容可以橫向和縱向自動擴(kuò)展。（使用其他邊框就不方便）
整體的左側(cè)和上邊的邊框通過給父元素設(shè)置 margin-left, margin-top -1px 來隱藏掉。1px 是邊框的寬度。
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個贊
<!DOCTYPE HTML>
<html>
<head>
<title>layout</title>
<style>
*{padding:0;margin:0;}
.wrap{width:960px;margin:200px;}
.wrap ul{
width:410px; /*與li相關(guān)*/
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; /*適當(dāng)?shù)倪吘啵瑄l的width大小與li的width、margin、margin適當(dāng)*/
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貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個贊
<!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>
添加回答
舉報
0/150
提交
取消