當父親是相對的時候，絕對定位元素的寬度受到約束

我有一塊實現點擊su魚菜單的CSS。當父親是相對的時候，絕對定位元素的寬度受到約束

的標記：

<table> 
<tr> 
<td> 
<div class="bodywrapper"> 
<a class="button" href="#"> 
    <ul class="menu"> 
     <li>test test test</li> 
     <li>test test test test test test test test test test test test test test test</li> 
    </ul> 
</a> 
</div> 
</td> 
</tr> 
</table>

樣式：

td{ 
    width: 80px; 
} 

.button{ 
    position: relative; 
    display: inline-block; 
    background-color: red; 
    width: 10px; 
    height: 27px; 

} 

.button:focus .menu, .button:active .menu{ 
    display: block; 
} 

.menu{ 
    display: none; 
    position: absolute; 
    min-width: 99px; 
    max-width: 700px; 
    width: auto; 
    border: 1px black solid; 
    margin-top: 27px; 
}

更新，上述實際包含的固定表格單元格中與

而一個小提琴：http://jsfiddle.net/dAAXp/3/

問題：我希望在整個應用程序中使用此樣式定義。因此，<li>中文本的長度將有所不同。但是，我想要的行爲是菜單具有最小和最大寬度。我已使用min-width和max-width設置爲.menu。但由於某些原因，即使<li>中的內容小於max-width，菜單的寬度也會限制爲min-width。

有人能告訴我爲什麼會發生這種情況嗎？

來源

2012-04-15 F21

Hm，我明白你的意思了。我想'li {white-space：nowrap}'不是一個選項？ – 2012-04-15 06:46:48

我只是試圖做到這一點，但然後文本不換行，並繼續通過'.menu'容器:( – F21 2012-04-15 06:49:17

看到我的修復和解釋下面@phpdev – 2012-04-15 07:05:20

編輯：用於在回答問題改變見底部（該溶液是完全一樣的）

的原因是，A是第一定位（相對）塊，該UL可以擴展到。由於錨定限制爲10px，因此包含的UL只能根據錨定框的尺寸進行填充。

你需要做的是去除位置：相對於錨點，添加另一個「不可見」容器並相對設置其位置，然後你的UL可以擴展到該元素的大小限制。看到this fiddle for a fixed version

在「英語」這是你的CSS這樣說：

UL：哦好了，所以我的寬度爲100％（如您沒有設置寬度）標有相對第一父...所以權我上面的Anchor被標記爲相對的，所以我的100％寬度是10px ...但是等待我的最小寬度是99px，所以我會尊重這一點。

UPDATE：

見fiddle with wrapper moved outside the table

的邏輯是完全一樣的第一個 - 你很可能在桌子上設置的相對位置，因爲它的容器，只要它的寬度爲100％或大於你包含的孩子所需的最小/最大寬度。

在側面註釋中，一旦你達到了不能讓父寬度大於所需寬度的點，就必須開始查看絕對定位並將元素從父元素中分離出來（但現在我將離開該元素）

面向語義在你們中間：

我已經加入DIV包裝 - 你可以easilty將此行爲，任何父（即table/tr/td只要它比你需要的最小 - 最大寬度@phpdev更寬，但是如果你達到了你的父母只是不夠寬的點，那麼你可能不得不打破語義

來源

2012-04-15 06:51:23

我覺得這很有意思，因爲你的「包含的UL只能填充「這是不正確的，在OP的例子中，UL的寬度已經是99 px，但無論如何，它確實有效，所以+1。 – 2012-04-15 07:02:08

看到我的'英語'解釋@MrLister – 2012-04-15 07:02:46

謝謝。感覺我應該被冒犯，但因爲它實際上幫助，我不能;） – 2012-04-15 07:05:34

當父親是相對的時候，絕對定位元素的寬度受到約束

回答

相關問題