css如何使li的最后一项不显示右边框

css如何使li的最后一项不显示右边框

如下图，我们经常会在一些导航栏中见到，要求每行中最后一列的右边框消失，该如何实现呢？

1、css3的nth-child(3n)是一种实现方法，但ie8-不兼容，在不考虑ie8-的情况下，确实是一种不错的方法

li:nth-child(3n){
  border-right:none;
}

2、另一种方法是利用margin的负值，来隐层最左边的li的左边框：

（推荐学习：CSS视频教程）

html结构：

<div class="ul_containter">
   <ul class="ul_noneborder">
    <li><a href="#">列表1</a></li>
    <li><a href="#">列表2</a> </li>
    <li><a href="#">列表3</a> </li>
    <li><a href="#">列表4</a> </li>
    <li><a href="#">列表5</a> </li>
    <li><a href="#">列表6</a> </li>
    <li><a href="#">列表7</a> </li>
    <li><a href="#">列表8</a> </li>
 </ul>
</div>

给每一个li加一个左边框

 .ul_containter{
     overflow:hidden;
 }
 .ul_noneborder{
     width:300px;
     height:150px;
     background:#ccc;
     margin: 20px 0;
     padding:0;
     list-style: none; 
 }
 .ul_noneborder li{
 float:left;
 width:79px;
 height:30px; 
 padding:0 10px;
 margin-top:10px;
 border-left:1px solid #000000; 
 text-align: center
 }
 .ul_noneborder li a{
     text-decoration: none;
     color:#080808;
 }

给最外层的ul_containter加了overflow：hidden; 现在就可以让ul往左移动-1px，列表最左边的左边框就达到了隐藏的效果。

.ul_containter {
	overflow: hidden;
}

.ul_noneborder {
	width: 300px;
	height: 150px;
	background: #ccc;
	margin: 20px 0;
	padding: 0;
	list-style: none;
	margin-left: -1px;
}

.ul_noneborder li {
	float: left;
	width: 79px;
	height: 30px;
	padding: 0 10px;
	margin-top: 10px;
	border-left: 1px solid #000000;
	text-align: center
}

.ul_noneborder li a {
	text-decoration: none;
	color: #080808;
}

这种方法利用的障眼法，给每个列表项加左边框，然后隐藏最左侧项的边框。

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是css如何使li的最后一项不显示右边框的详细内容，更多请关注0133技术站其它相关文章！