부모가 상대 일 때 절대적으로 배치 된 요소의 너비가 제한됩니다.

Question

클릭 수퍼 피쉬 메뉴를 구현하는 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을 사용하여 이것을 설정했습니다. 그러나 어떤 이유로 인해 의 콘텐츠가 max-width보다 작을지라도 메뉴의 너비는 min-width으로 제한됩니다.

왜 이런 일이 발생했는지 알 수 있습니까?

Answer 1

편집 : 이유는 A가 처음으로 위치 (상대)가 UL이로 확장 할 수 있음을 차단하는 점이다 (이 솔루션은 정확히 동일)

질문에 변경 대답 하단을 참조하십시오. 앵커가 10px로 제한되어 있기 때문에 포함 된 UL은 해당 앵커 상자 크기에 따라 채울 수 있습니다.

앵커에서 상대적인 위치를 제거하고 다른 '보이지 않는'컨테이너를 추가 한 다음 상대 위치를 설정하면 UL이 해당 요소의 크기 제한까지 확장 될 수 있습니다.

UL : 이것이 당신의 CSS의 말씀이다 '영어'에 this fiddle for a fixed version

를 참조 우 괜찮 나의 폭이 100 %를 (당신은 설정하지 않은로서 폭)을 상대로 표시된 첫 번째 부모의 ... 오른쪽 그래서 내 위에있는 앵커는 상대적인 것으로 표시되어 100 % 너비가 10px이지만 내 너비가 99px이므로 기다려야합니다.

UPDATE :

논리 정확히 첫번째와 동일하다 fiddle with wrapper moved outside the table

을 참조하십시오 - 당신은 아마 테이블에 위치를 설정할 수는 컨테이너가 AS LONG 폭이 100 % 이상이보다있는 그대로의로 포함 된 자녀의 최소/최대 너비가 필요합니다.

사이드 노트에서 부모 너비가 필요 이상으로 커질 수없는 지점에 도달하면 절대 위치를 확인하고 부모로부터 요소를 분리해야합니다 (단, 지금은 떠날 것입니다). 너희 가운데 의미에 대한)

가 :

내가 DIV 래퍼를 추가 한 - 당신은 어떤 부모에게이 동작을 적용 easilty 수 있습니다 (즉,테이블/tr/td는 너비가 최소 너비 인 @phpdev보다 넓어 지지만 부모가 너비가 충분하지 않은 지점에 도달하면 의미를 깨뜨릴 수 있습니다.