移動端頁面，有如下圖的需求：

實現效果：

實現 css 程式碼：

.list {/*父級*/
    border: 1px solid #E9EAEA;
    border-radius: 2px;
    background: #F6F6F6;
    padding: .12rem 0;
}

.item {/*子級*/
    overflow: hidden;
    background: #F6F6F6;
    padding: 0.05rem .15rem;
    width: calc(100% + 2px);
    margin-left
 
: -1px;
}

上述程式碼解釋：

由於父級並未設定寬度，所以子級便不能使用固定寬度，使用 margin-left 負值覆蓋父級邊框。所以使用百分比控制寬度，於是就有了 神奇的 calc ,calc對於移動端自適應寬高非常有用。新增下述程式碼即可達到需求的效果。

width: calc(100% + 2px);

margin-left: -1px;

新增 2px 是由於只覆蓋父級左右邊框，然後結合 margin-left:-1px; 來達到效果。