중첩 목록에 최소 너비가 필요합니까?

내가 좋아하는 중첩 된 목록을 가지고 :중첩 목록에 최소 너비가 필요합니까?

<ul> 
    <li> 
     <a href="#" class="">Parent Links</a> 
     <!-- Flyoutwrapper is what expands when users hover over the parent links, the contents of flyoutwrapper will be changing, so I can not set a min-width or width --> 
     <div class="flyoutWrapper"> 
     <ul class="flyout fourCol"> 
      <li></li> 
      <li></li> 
     </ul> 
     </div> 
    </li> 
</ul>

내가 서로 옆에 떠있는 클래스 = "플라이 아웃 fourCol"모든 리튬의 내부를 원한다. 열에. 그러나 "flyout fourCol"에 대해 ~ 900px의 최소 너비를 설정하지 않으면 각 li 요소가 이전 요소 아래로 접 힙니다.

이

#nav .flyout.fourCol { min-width:900px; }

http://jsfiddle.net/t7esz/ (이 작품) 귀하의 경우에는

#nav .flyout.fourCol { width:auto; }

http://jsfiddle.net/sumcA/2/ (이 작동하지 않습니다!)

출처

2012-04-12 illusorydeveloper

을 :

이

내가처럼 내 드롭 다운이보고 싶은 것입니다 , 예, 귀하의 .flyout 하위 메뉴가 부모로부터 너비를 이어 받기 때문에너비가없는 "결혼식". flyout div에서 너비를 제거하고 "weddings"상위 항목에 추가하면 li 하위 메뉴는 동일한 너비를 상속하며 너비가 명시 적으로 부여되지 않습니다. 그래서 네 대답은 네, 너비를 자신의 너비를 준수하기 위해 하위 메뉴에 추가해야합니다, 그렇지 않으면 부모로부터 상속됩니다.

출처

2012-04-12 14:09:55

감사합니다. 이 HTML을 재구성하여 명시적인 너비를 설정하지 않아도된다는 제안이 있습니까? – illusorydeveloper

@illusorydeveloper 당신은 부모'li'을 펼칠 수 있습니다. 그리고 부모의 폭 (적절히 clearfix 될 때)을 가져야 만합니다. 그러면 왼쪽에 자식'li'을 띄우십시오. 그러면 원치 않는 결과가 렌더링 될 수 있습니다. 행운을 빌려'min-width'를 추가했지만, 여기에는 폭 선언이없는 데모가 있습니다 : http://jsfiddle.net/sumcA/3/ –

중첩 목록에 최소 너비가 필요합니까?

답변

관련 문제