拋開table佈局，我們也能實現單線邊框

1、前端項目中，“單線邊框”列表已是屢見不鮮：

採用table佈局，實現起來難度不大，如果拋開table佈局呢？下面我們就來嘗試一下

2、先上圖，看最終效果：

3、html代碼：

<!-- 列表容器 -->
	<div class="list-wrapper">
		<ul class="list-content">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</div>

4、css代碼，margin-right的妙用

*{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

.list-wrapper{
	width: 1000px;
	height: 400px;
	border: 1px solid #e4393c;
	margin: 50px auto;
	overflow: hidden;
}

.list-content{
	display: block;
	width: 800px;
	height: 120px;
	overflow: hidden; 
	/* 設置padding-top: 1px,否則第一排列表的上邊框會被隱藏 */
	padding: 1px 0 0 0; 
    margin:100px;
}

.list-content li{
	float: left;
	width: 100px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	border: 1px solid #317ef3;
	/* 
	 * 設置margin-top和margin-right,隱藏兩個列表重合的上邊框和右邊框 
	 * 
	 */
	margin: -1px -1px 0 0;
}