無序列表是網頁中最常用的標記之一,而當我們需要美化列表的時候,就可以使用 CSS 來為其添加一些邊框樣式。
ul { list-style: none; border-left: 2px solid #ccc; border-right: 2px solid #ccc; padding-left: 0; } li { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; }
首先,我們使用list-style: none;
來取消列表的默認樣式,同時也可以避免默認的小黑點出現。
接下來我們為無序列表添加左右邊框,這里使用了border-left: 2px solid #ccc;
和border-right: 2px solid #ccc;
屬性,這里的 2px 是邊框的寬度,#ccc 是邊框的顏色。
然后我們需要將每個列表項添加上邊框,這里使用了border-top: 1px solid #ccc;
和border-bottom: 1px solid #ccc;
屬性來設置上下邊框。
最后再為每個列表項添加一些內邊距,這樣會讓列表更加美觀。
通過以上 CSS 樣式,我們就可以為無序列表添加上左右邊框了。