看看下圖,經常會在一些導航欄中見到,要求每行中最後一列的右邊框消失,如何在所有瀏覽器中最便捷優雅的實現?
如果是不需要相容ie8-
,那麼使用 css3 新增的選擇器無疑是一種好方法。 1
2
3
4
// 使用偽類選擇器,選擇第
3
n 個元素去掉邊框
li:nth-child(
3
n)
當然,如果個數確定也不多,給需要去掉右邊框的元素直接新增乙個特定的 class 也就完事。或者,使用 table 雖然繁瑣一點,不過也能實現。
不過這樣都不夠優雅。
這裡有個小技巧,就是通過新增反向邊框並且增加乙個負的margin
來實現。
首先,假定我們的ul
結構如下: 1
2
3
4
5
6
7
8
9
10
11
<
div
class="ul-container">
<
ul
>
<
li
>測試
<
li
>消失
<
li
>邊界線
<
li
>右側
<
li
>邊界線
<
li
>消失
<
li
>測試
如圖中所示,假定每行排列 3 個li
,每個li
寬100px
,我們的 ul 和 ul-container 寬度都設為300px
。
最重要的是,每個li
設定乙個左邊框而不是右邊框:
1
2
3
4
5
6
7
8
9
10
.ul-container,
ul
li
我們會得到如下這樣的結果:
接下來,我們將容器ul-container
設定為overflow:hidden
,並且將ul
左移乙個畫素margin-left:-1px
。
這樣ul
中第一列的所有邊框都因為左移了一畫素並且被overflow:hidden
而消失了,造成了下乙個li
的右邊框看著像左邊框一樣,其實只是個障眼法: 1
2
3
4
5
6
.ul-container
ul
效果圖就如一開始圖示所示:
demo戳我
這種做法可以適應不同li
個數不同行數的所有情況,因為每個新新增的li
,都會生成乙個左邊框與上乙個li
元素分開,只是在視覺上看上去像是上乙個li
元素的右邊框。
ireport製作報表邊界線問題
我用的ireport2.0.5,在ireport中的顯示如圖1,其中漢字部分我用 代替了,在ireport中顯示是有線的,我是改的border選項卡下的line width為1,line style為實線 可到了匯出excel的時候標題,資料都有,線都沒了,哪位遇到過這種情況或對報表製作比較熟悉的指...
給VS2005加上右邊界線
好的 風格是生成高質量軟體的基礎,其中有一點就是 的每行不能太長,一般建議每行不超過80個字元。vs2005裡面有個隱藏的功能是可以設定編輯器的邊界線。建立乙個vs2005 guideline.reg檔案,內容為 windows registry editor version 5.00 hkey c...
給VS2005的編輯器新增右邊界線
好的 風格是生成高質量軟體的基礎,其中有一點就是 的每行不能太長,一般建議每行不超過80個字元。vs2005裡面有個隱藏的功能是可以設定編輯器的邊界線。建立乙個vs2005 guideline.reg檔案,內容為 windows registry editor version 5.00 hkey c...