消失的邊界線問題

2021-09-13 18:02:52 字數 2613 閱讀 5644

看看下圖,經常會在一些導航欄中見到,要求每行中最後一列的右邊框消失,如何在所有瀏覽器中最便捷優雅的實現?

如果是不需要相容ie8-,那麼使用 css3 新增的選擇器無疑是一種好方法。 1

2

3

4

// 使用偽類選擇器,選擇第3n 個元素去掉邊框

li:nth-child(3n)

當然,如果個數確定也不多,給需要去掉右邊框的元素直接新增乙個特定的 class 也就完事。或者,使用 table 雖然繁瑣一點,不過也能實現。

不過這樣都不夠優雅。

這裡有個小技巧,就是通過新增反向邊框並且增加乙個負的margin來實現。

首先,假定我們的ul結構如下: 1

2

3

4

5

6

7

8

9

10

11

<divclass="ul-container">

<ul>

<li>測試

<li>消失

<li>邊界線

<li>右側

<li>邊界線

<li>消失

<li>測試

如圖中所示,假定每行排列 3 個li,每個li100px,我們的 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...