HTML和CSS。 錯誤：當我增加比例尺時會附加1px邊框

Question

這是模板：

http://jsfiddle.net/4gvy5/embedded/result/

代碼：HTML

<div class="wrapper">
    <ul class="block-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    border: none;
}

.wrapper{
    width: 100%;
    padding: 40px 0;
    background: #e6e6e6;
}

.block-list{
    list-style: none;
    width: 940px;
    margin: auto;    
    overflow: hidden;
}

.block-list li{
    display: block;
    float: left;
    width: 298px;
    margin-right: 20px;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px 0;
    text-align: center;
}

.block-list li:last-child{
    margin-right: 0;
}

當我調整窗口大小時，使其縮放更大-最后一個孩子掉下來。 我查看了元素面板，了解了為什么會發生。 li塊的所有邊框（右或左）都增加到1px。 這就是塊的寬度變為301px的原因。但是在正常比例下，塊的寬度為300px。 我該如何解決這個問題？ 請幫助。 我會感謝大家。

Answer 1

編輯

只需使用box-sizing:border-box; 感謝@Cthulhu

箱型演示

---

原始答案

那不是錯誤。 但這對每個Web開發人員來說都是一個問題。 解決方案是添加邊框。 您還應該創建一個負邊距。

DEMO

如果你的邊界是

border: 1px solid green;

為了避免這種問題，還必須使負邊距為-1px。

margin:0 20px 0 -1px;

或者您可以簡單地減小li的寬度。

Answer 2

演示

請嘗試此CSS ...

.block-list li:last-child {
    margin-right: 0;
    margin-top: -1px;
}