css刪除最後一個邊界線

螞蟻小編發表於2017-04-16
CSS

在很多時候需要對一些列表使用線進行分隔。

不過為了美觀，最後一個邊界線通常要刪除，下面就介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline
}
ol,ul{
  list-style:none
}
ul{
    width: 300px;
}
 
li{
  float:left;
  width:99px;
  line-height:30px;
  text-align:center;
  border-left:1px solid #999;
  font-size:18px;
  margin-bottom:10px;
}
li:nth-child(1),li:nth-child(4) {
  border-left:none;
}
.ul-container {
  width: 300px;
  margin: 50px auto;
  overflow: hidden;
  background: #eee;
  padding: 10px 0;
}
</style>
</head>
<body>
  <div class="ul-container">
    <ul>
      <li>螞蟻</li>
      <li>部落</li>
      <li>js教程</li>
      <li>正則教程</li>
      <li>canvas</li>
      <li>svg</li>
    </ul>
  </div>
</body>
</html>

非常的簡單，只要使用:nth-child(n)選擇器去掉對應的邊框即可。

關於此選擇器可以參閱nth-child() 選擇器一章節。

不過有些同學會糾結於選擇器的瀏覽器相容性問題，如果想要相容所有的瀏覽器可以使用如下方式:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline
}
ol,ul{
  list-style:none
}
ul{
    width: 300px;
    margin-left:-1px;
}
li{
  float:left;
  width:99px;
  line-height:30px;
  text-align:center;
  border-left:1px solid #999;
  font-size:18px;
  margin-bottom:10px;
}
.ul-container {
  width: 300px;
  margin: 50px auto;
  overflow: hidden;
  background: #eee;
  padding: 10px 0;
}
</style>
</head>
<body>
  <div class="ul-container">
    <ul>
      <li>螞蟻</li>
      <li>部落</li>
      <li>js教程</li>
      <li>正則教程</li>
      <li>canvas</li>
      <li>svg</li>
    </ul>
  </div>
</body>
</html>

既然邊界線是邊框，那麼我們就可以通過負外邊距方式，向左移動邊框寬度的尺寸:

[CSS] 純文字檢視 複製程式碼
ul{
  width: 300px;
  margin-left:-1px;
}

然後再給容器元素新增設定一個尺寸，然後新增overflow:hidden，隱藏這個邊框即可。

[CSS] 純文字檢視 複製程式碼
.ul-container {
  width: 300px;
  margin: 50px auto;
  overflow: hidden;
  background: #eee;
  padding: 10px 0;
}

相關文章