溢出div內的意外空白

-1

我正在寫一個簡單的出勤webapp，我的問題如下。溢出div內的意外空白

在上面我的代碼，我得到約空白，我無法解釋或得到溢出裏面的div的右側擺脫50像素。（一直滾動到右側）。

我預計溢出在「傑克」列後立即停止，但它會繼續。

我該如何擺脫額外的空間？

.data { 
    padding-left: 149px; 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
.data .names > div { 
    width: 30px; 
    height: 100px; 
    display: inline-block; 
} 
.data .names > div > div { 
    width: 100px; 
    height: 30px; 
    line-height: 30px; 
    display: inline-block; 
    transform: rotate(-90deg) translateX(-100px); 
    transform-origin: 0 0; 
    padding-left: 1em; 
    border-top: 1px solid #ccc; 
} 
.data .row { 
    height: 30px; 
    margin-left: 1px; 
    display: inline-block; 
} 
.data .row > div { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
} 
.data .row > div:not(:last-child) { 
    border-right: 1px solid #ccc; 
} 
.data .row > div .icon { 
    margin-top: 7px; 
} 
.data .row:hover { 
    background-color: rgba(66, 133, 244, 0.3); 
} 
.data .row:not(:first-child) { 
    border-top: 1px solid #ccc; 
}

來源

2015-07-21 ssttevee

你想實現像[這裏]（http://jsfiddle.net/mf279tnw/2 /）？ –

的間距是由於內div的width。

請檢查小提琴 - http://jsfiddle.net/mf279tnw/5/

width從.attendance-sheet .data .names > div > div

刪除，border-left加入.attendance-sheet .data .names > div

來源

2015-07-21 09:37:46

溢出div內的意外空白

回答

相關問題