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; }
相關文章
- C#刪除字串最後一個字元C#字串字元
- css刪除頁面周邊空白CSS
- word最後一頁空白頁怎麼刪除不了_word中最後一頁刪不掉處理方法
- Java拼接字串時,去掉最後一個多餘的逗號,或者Java刪除某個字元Java字串字元
- AUTOCAD——快速提取邊界線
- networkx基礎用法:新增節點、新增邊、刪除節點、刪除邊、計算度、賦權重
- 如何利用CSS寫一個六邊形?CSS
- php(js)批量刪除/單個刪除PHPJS
- 刪除按鈕點選後的虛線輪廓
- C#|.net core 基礎 - 刪除字串最後一個字元的七大類N種實現方式C#字串字元
- json結構體裡邊的刪除JSON結構體
- e語音 【刪除文字右邊字元】字元
- mySql刪除多個表 刪除多個欄位的SQLMySql
- 前端刪除多條資料,如何將多個被刪除項指定key傳給後臺前端
- 《超越邊界》
- CSS border-collapse 細線邊框CSS
- CSS虛線邊框效果程式碼CSS
- 二分查詢左邊界,右邊界,>=,>,<=,<
- win10兩個賬戶怎麼刪除一個_win10登入介面有兩個賬戶如何刪除一個Win10
- 正規表示式刪除字串兩邊的空格字串
- linux刪除資料夾命令是什麼 linux刪除一個目錄的命令Linux
- whk我【資料刪除】你個【資料刪除】的
- c# 刪除某個資料夾下所有空目錄,解決因刪除空目錄後上一組成空目錄沒有刪除的情況C#
- 如何快速刪除Word中的頁首橫線?刪除頁首橫線技巧分享
- Python字串刪除第一個字元常用的方法!Python字串字元
- CSS將邊框設定為虛線CSS
- css-虛線邊框滾動效果CSS
- 在Linux中,刪除一個檔案,刪不掉是什麼原因?Linux
- 劃分微服務邊界的5個特徵微服務特徵
- FE.UX-常見CSS邊界情況防禦處理UXCSS
- 《最後生還者2》開發者談加班:一邊通宵,一邊等著遊戲翻車遊戲
- css爸爸!一邊固定,另一邊自適應的方法CSS
- CSS影像邊框:Interop 2023的一個重點領域CSS
- classList用於新增和刪除CSS類的APICSSAPI
- 【AutoCAD .NET】如何在無邊界Hatch上選擇邊界點?
- Ubuntu如何刪除Dash中的某一個專案Ubuntu
- 在Linux系統中如何刪除一個檔案?Linux
- 【WPF】自定義一個自刪除的多功能ListBox
- JavaScript刪除字串中最後的逗號JavaScript字串