如何在CSS中忽略滚动条宽度？

Question

我想把三个盒子水平地排成一行，但最后一个倒了。

当我移除滚动条时，它排列得很好。

所以，问题是由滚动条宽度引起的。

http://codepen.io/anon/pen/kxapap

<div id="main">

    <ul id="window-list">

        <li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li>


    </ul>

</div>

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {

    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    display: inline-block;
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 0 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

Answer 1

在纯CSS中做到这一点的一种方法是使滚动条完全不可见。这仍然允许滚动。

::-webkit-scrollbar { 
display: none; 
}

您还可以使用jQuery来实现您想要的目标：

$(document).ready(function(){
    var body = $('body');
    var normalwidth = 0;
    var scrollwidth = 0;
    if(body.prop('scrollHeight')>body.height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - body.width();
        $('#main').css({marginRight:'-'+scrollwidth+'px'});
    }
});

您可以使用以下方法隐藏水平滚动：

body {
    overflow-x:hidden;
}