無法爲滾動的div中的最後一個元素賦予餘量嗎？

我有一個div與我用作標籤的一些子div，並且我的父級div具有水平滾動（我使用這個用於移動視圖，因此寬度較小）。事情是這樣的：無法爲滾動的div中的最後一個元素賦予餘量嗎？

.parent { 
 
    display: flex; 
 
    overflow-x: auto; 
 
    padding: 15px 0 20px; 
 
} 
 

 
.tab { 
 
    font-size: 15px; 
 
    text-transform: uppercase; 
 
    padding: 10px 40px; 
 
    color: #a4b5bf; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
    <div class="tab">Tab 1</div> 
 
    <div class="tab">Tab 2</div> 
 
    <div class="tab">Tab 3</div> 
 
    <div class="tab">Tab 4</div> 
 
</div>

問題是，當我想建立保證金權最後一個元素，它只是不會從股利。他得到保證金端移動，你在檢查員看到它，但它只是不動。

來源

2017-08-08 grabnem

有CSS的柔性屬性，請嘗試使用它們來修復。類似於「flex：0 0 auto」; –

你是什麼意思？因爲當我看着檢查員時，最後一個元素沒有空白。只有填充，這是所有的元素？ –

現在沒有餘量了，我在js中有一個函數給左右第一個元素和最後一個元素（我必須這樣做，但它有效），並且它從左邊開始移動，但最後一個繼續停留在右邊，即使是有保證金的權利。 @DevBunker – grabnem

顯示：flex;在父母身上防止對孩子的保證金。要達到你想要的，你可以使用透明邊框：

 

    .tab:last-child { 
     border-right: 30px solid transparent; 
    }

來源

2017-08-08 12:21:07 kastriotcunaku

這會做這項工作，但如果我想向我的選項卡添加一些背景，它只會將其視爲填充和我的標籤只是更廣泛 – grabnem

@grabnem - 如果你有堅實的背景顏色給父母，你可以用邊框顏色覆蓋它，例如。 border-right：30px solid #ffff; //對於白色父母背景。 – kastriotcunaku

無法爲滾動的div中的最後一個元素賦予餘量嗎？

回答

相關問題