겹쳐진 탭 컨테이너 목록 항목

물론 이것에 대한 간단한 해결책이지만, 해결하기 위해 머리를 긁적입니다. 각 항목에 하이퍼 링크가있는 약 3 개의 목록 항목이있는 탭 컨테이너가 있습니다. 브라우저 창의 크기를 줄이면 (오른쪽부터) 요소를 극한의 오른쪽으로 숨기지 않고 대신 목록 항목의 크기를 줄인 다음 다른 두 목록 항목의 너비 바로 아래에서 조정합니다.겹쳐진 탭 컨테이너 목록 항목

최소 너비는 요소의 너비와 동일하게 설정되어 있습니다.

어디서 조정해야합니까?

다음은 의미 론적 구조 여기

<div id = "tabbed"> 
    <ul> 
    <li><a href = "#tab_1">Tab 1</a></li> <!-- 3 list items --> 
    </ul> 
    <div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item --> 
    </div> 
</div>

인 CSS입니다 :

#tabbed 
{ 
width :80%; 
margin:auto; 
margin-top:20px; 
} 

#tabbed ul{ 
margin:0px; 
margin-top:15px; 
} 

#tabbed li 
{ 
display: inline-block; 
list-style-type:none; 
border:1px solid #ccc; 
border-bottom: 0px; 
border-top-left-radius:4px; 
border-top-right-radius:4px; 
margin-right:5px; 
margin-top:5px; 
padding:4px 4px 10px 4px; 
width: 30%; 
background:#87CEEB; 
} 

#tabbed a{ 
font-family:Arial, Helvetica, sans-serif; 
font-size: 13px; 
font-weight:bold; 
color: #7F818B; 
display:block; 
text-align:center; 
text-decoration:none; 
margin-top:5px; 
margin-bottom:5px; 
}

출처

2012-08-02 user1020069

게시하는 코드 또는 바람직하게 라이브 예제에 대한 링크가 도움이 될 것입니다. –

예, 우리에게 당신이 무엇을하고 있는지에 대한 몇 가지 예를 들어 HTML과 CSS/스타일을주지하시기 바랍니다. 브라우저가 콘텐츠를 래핑하는 방식은 구현에 따라 다릅니다. 나는 목록을 수평으로 만들기 위해 인라인으로 CSS 디스플레이를 사용한다고 가정합니다. 보는 코드없이

출처

2012-08-02 01:27:29 Revent

디스플레이 사용 : 인라인 블럭을 수평으로 설정하기 위해 dispaly : 인라인이 제대로 작동하지 않아 아마도 여기에서 사용하는 다른 CSS 스타일 시트를 무시할 것입니다.하지만 나중에 알아 보겠습니다 ... .감사 ! – user1020069

방금 CSS와 시맨틱 마크 업을 공유했습니다. – user1020069

, 나는 다음과 같은 제안 할 수 있습니다 :

이 우선 들어

your_div {overflow:hidden;}

시도를, 둘째

, 최소 폭 단지 밖으로 절반 브라우저에서 관찰된다 그곳에. 최상의 결과를위한 코드 예제뿐만 아니라 최소 너비를 설정하는 다른 방법을 시도해 볼 것을 제안합니다.

출처

2012-08-02 02:28:11 FredTheWebGuy

아니요, 오버플로 : 숨김이 문제를 해결하지 못했지만 방금 넣은 코드를보고 싶습니까? – user1020069

겹쳐진 탭 컨테이너 목록 항목

답변

관련 문제