가로 요소를 사용 가능한 공간을 확장하도록 확장하는 방법은 무엇입니까?

Question

가변 개수의 탭이있는 CSS fluid tab menu을 만들려고합니다 (포함 된 헤더의 길이에 따라 탭이 확장되는 Windows에서 볼 수있는 것과 유사, 아래 참조).

<div class="test"> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">very long text is this</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Two</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Three</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Four</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Five</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
</div> 

그리고 CSS : 이것은 다음을 생성합니다

을

.test { width: 100%; display: table; } 
.test .element { border: 1px solid red; float: left; min-width: 19%; } 
.test .element.prelast { border: 1px solid green; } 
.test .element.last { float: none !important; overflow: hidden; } 
.test .element h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

: 여기

내가 (내가 요소 구조를 유지하기 위해 필요) 설정을 가지고, 예입니다

나는 화면, 나머지 폭을 채우는 마지막 요소와 여러 줄에있는 메뉴 휴식을 축소 할 때

:

내 문제는 "첫 번째 행"의 요소를 확대 한 번 사용 가능한 공간을 커버하는 메뉴가 깨집니다. 단순히 min-width: 19%으로 설정하면 문제가 발생하지만 작동하려면 아무 것도 얻을 수 없습니다.

질문 :
가 어떻게이 "행"의 요소를 만들 것이다 (이 여러 행에 침입 경우는, 정말 행 아니다)에만 CSS를 사용하여 사용 가능한 모든 공간을 차지?

편집 :
Here 무슨 뜻인지 보여주는 샘플 페이지입니다. 브라우저 창을 축소하고 요소가 어떻게 동작하는지보십시오. 여러 줄로 깨진 후 첫 번째 행을 전체 너비로 확장 할 수있는 방법을 찾고 있습니다.

업데이트 :
견본 페이지를 업데이트했습니다. here을 참조하십시오. 모든 요소가 "한 줄에"있는 동안 요소를 확장하는 데 문제가 없습니다. 문제는 행이 여러 행으로 "나누기"시작할 때 시작됩니다. 요소를 화면 전체로 확장하여 오른쪽 상단 간격을 채울 수 있는지 알고 싶습니다.

여기에 2 개의 추가 스크린 샷이 있습니다.

그래서 요소 옆에 틈이 "4 개의"요소 옆에 지금의 격차를

를 폐쇄해야 "세"폐쇄 될 필요가있다. 요소 "4"에 설정된 값이 작동하지 않는 것을 볼 수 있습니다. 왜냐하면 요소가 항상 오른쪽 상단에 있지 않기 때문입니다. 오히려 그것이 모든 요소에 설정하고있는 CSS 규칙이어야합니다 (추측합니다).

또한 Javascript/Jquery를 사용하여 쉽게 수행 할 수 있다면 아이디어도들을 수 있습니까?

도와 주셔서 감사합니다.

Answer 1

먼저 생각해 볼 수있는 것은 .test div를 display: table으로 설정 했으므로 .test .element을 display: table-cell으로 설정할 수 있습니다. 이렇게하면 모두 같은 줄에 있고 100 %로 확장됩니다. 유일한 문제는 < IE8이 display: table-cell을 처리하지 않지만이 문제를 해결할 수있는 해결책이 있다는 것입니다. 하나는 here입니다. 이것이 정말로 당신이 원하는 것을 정확히 달성 할 수있을지는 모르겠지만 가능성은 있습니다. 나는 잠재 의식을 계속 생각할 것이다. 좋은 질문!

fiddle

Answer 2

당신은 100 % 같은 단지 <table> 가진 폭이 작업을 수행 할 수있다;

<table class="menu" cellpadding="0" cellspacing="0"> 
<tr> 
<td>menu1</td> 
<td>menu2</td> 
<td>menu3</td> 
<td>menu4</td> 
<td>menu5</td> 
</tr> 
</table> 

및 CSS와 유사합니다.

Here

.menu{ 
    width: 100%; 
} 
.menu tr td{ 
    height: 20px; 
    background: gray; 
    cursor: pointer; 
    text-align: center; 
} 
.menu tr td:hover{ 
    background: white; 
} 

라이브 데모입니다.

Answer 3

자바 스크립트 및 jQuery을 사용할 수있는 경우 해결책이 있습니다.

check this Demo

개인적으로 나는 또한이 데모는 2 행

Answer 4

유지하려는 경우 작동 할 준비가되어이 최선의 해결책이라고 생각하지 않지만 그것은 당신에게 을 도울 수있을 수 있습니다 display : table, table-row 및 table-cell을 사용하여 얼마나 많은 항목이 있더라도 관계없이 모든 행을 한 행에 표시 할 수 있습니다. 그러나 당신은 그것들을 모두 작동시켜야한다. 그래서 당신이 필요

<div class="menu"> 
    <ul> <!-- Menus should usually be Lists if it's your choice --> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
</div> 

하고 다음 CSS를 모든 마술

.menu { display: table; width: 100%; } 
.menu ul { display: table-row; width: 100%; } 
.menu ul li { display: table-cell; } 

인치 그래서 당신의 세포는 항상 전체 공간을 사용합니다. 여러 라인의 기능을 원하는 경우

, 당신과 당신의 윈도우를 확인하기 위해 몇 가지 자바 스크립트를 사용하여 다음 몇 가지 자바 스크립트를 사용하여이

<div class="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
    <ul> 
     <li>Five</li> 
    </ul> 
</div>