Div未正確擴展

每當我將div寬度設置爲100％，並向其中添加新元素時，它會在屏幕邊框上展開。當我將div設置爲像素值時，它工作正常，但在兩種不同的屏幕分辨率下看起來不合適。所以我想要的東西是有一個適合屏幕邊緣和正確擴展的div。Div未正確擴展

的jsfiddle：添加標籤幾次，看問題 https://jsfiddle.net/272p06ng/4/

垃圾郵件。然後在CSS中查找.l_tabs並閱讀評論。我相信問題出在l_tabs的父類中。

的DIV％價值的行爲是這樣的：

分度，像素值顯示我想要的行爲：

標籤結構：

<div class="l_tabs"> 
    <div> 
    <ul id="myTab1" class="nav nav-tabs bordered"> 
    <li class="tab-add"></li> 
    <li class="contentTab active "></li> 
    <li.....></li> 
    </ul> 
    </div> 
</div>

CSS：

.l_tabs { 
    background: #474544 none repeat scroll 0 0; 
    display: block; 
    height: 57px; 
    overflow: hidden; 
    width: 100%; /* 1st picture */ 
    width: 1370px; /* second picture */ 
} 
.l_tabs > div { 
    background-color: #474544; 
    height: 57px; 
    padding-top: 4px; 
    width: 100%; 
} 
.l_tabs > div > ul { 
    overflow-x: auto; 
    white-space: nowrap; 
    width: 100%; 
}

還有一些父寬度爲100％的包裝。

編輯：添加position:absolute到l.tabs 解決了這一問題。

來源

2016-08-12 Dino

鏈接到jsfiddle請（工作代碼更容易修復，真的）;最大寬度：100％+溢出：隱藏（與您已經創建的滾動條）可能是一個答案 - >嘗試 –

將完整的靜態版本可以嗎？ –

在這裏你有靜態版本 - https://jsfiddle.net/272p06ng/7/ –

.l_tabs { 
    height: 57px; 
    display: block; 
    width: 100%; 
    background: #474544 none repeat scroll 0 0; 
    overflow: hidden; 
}

來源

2016-08-12 12:15:21

歡迎來到Stack Overflow！儘管這段代碼可以解決這個問題，但[包括一個解釋]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有助於提高您的帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。也請儘量不要使用解釋性註釋來擠佔代碼，因爲這會降低代碼和解釋的可讀性！ – FrankerZ

Div未正確擴展

回答

相關問題