我有這個解釋我的問題的小提琴。

我希望頂部的菜單項占窗口的20%，但我也希望它們有一個1像素的右邊框。

正如你所看到的，它稍微有點突出，這是非常明顯的。

----------------------------------------------
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 |
----------------------------------------------
|          row one needs to be same          |
----------------------------------------------

我不認為百分比邊框會起作用，因為那樣的話不同的窗口大小就不一致了。

我怎樣才能做到這一點？

您可以使用CSS框大小來實現這一點:

像這樣:

#nav_1232938 li, .row {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

我剛剛遇到了一個項目，我不得不做同樣的事情。盡管框大小可能是最好的答案，但我決定使用generated :after元素(因為我的項目有一些特定的問題)。

我將li的(寬度+填充)x數量設置為100%，然后絕對定位為12個像素寬，100%高li:元素后到頂部:0，右:-6px；每一個李。li:最后一個子元素向右浮動，因此它總是與下面的框對齊(瀏覽器根據百分比不同地計算分數像素余數，因此有時在浮動元素的最右邊有一個空格，即使元素的寬度加起來是100%)，Li:最后一個子元素:after被設置為display:none。

下面是你的JSFiddle的一個編輯例子:http://jsfiddle.net/DZLTJ/12/

.header {
    height: auto;
    background-color: #595858;
    padding: 54px 0;
        margin-bottom: 27px;
    position: relative;
}

.row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
}

#nav_1232938 li {
    position: relative;
    display: block;
    float: left;
    width: 20%;
    margin: 0;
    padding: 18px 0;

    list-style: none;
    background-color: #585858;
    text-align: center;
    font-size: 16px;
    height: 40px;
}

#nav_1232938 li:after {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background: blue;
    content: '';
    z-index: 10;
}

#nav_1232938 li:last-child {
    float: right;
}

#nav_1232938 li:last-child:after {
    display: none;
}

#nav_1232938 li a {
    color: white;
    text-decoration: none;
}

#nav_1232938 {
    height: 75px;
    border-bottom: 1px solid white;
}

.header a{
    color: #FFF;
    font-size: 18px;
    text-decoration: none;
}

.header h1 {
   position: absolute;
    left: 18px;
    bottom: 18px;
}

.row .twelvecol {
    width: 100%;
    float: left;
}

.nav {
    margin-bottom: 1px;
    z-index: 15000;
}

注意:在我的頁面中，以%為單位設置的填充永遠不會小于:after元素以像素為單位設置的寬度，因此內容框永遠不會被隱藏。

所有瀏覽器都支持框尺寸和:after，但是:last-child實際上支持較少，沒有Internet Explorer 8。正如我所說的，框大小可能是一個更好的選擇，但是在我的例子中，絕對定位的after元素是一個更好的選擇——我認為它值得一提，以防它也適用于其他任何人。

對于邊框，您可以使用

outline: 1px solid black;

這適用于所有現代瀏覽器，但不適用于Internet Explorer 6和Internet Explorer 7。