要求格子間需要有紅色線條分隔，實在沒有想出頭緒 >,_,<
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條經驗 獲得超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>
- 3 回答
- 0 關注
- 375 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消