탭 패널의 각 탭에 대한 너비 자동 조정

탭이 6 개인 탭 패널이 있습니다. 각 탭의 너비가 해당 탭의 텍스트에 자동 맞춤되도록 CSS를 설정하여 긴 문장의 탭이 넓어지면 더 짧은 문장의 탭이 더 얇아집니다. 또한 패널의 최대 너비가 900px가되도록하고 싶습니다.탭 패널의 각 탭에 대한 너비 자동 조정

#TabbedPanels2 .TabbedPanelsContentGroup { 
margin-left:auto; 
margin-right:auto; 
width:70%; 
margin-top:105px; 
max-width:900px; 
}

문제는 지금 모든 탭 (6)은 항상 대신 자동 조정 텍스트에 맞게 아래로의, 900px으로 숙박 할 수 있다는 것입니다 :

이 지금까지 내 CSS입니다. 결과는 여기에서 확인할 수 있습니다 : www.shellshockeddoc.com 특히 "Watch"에 대한 탭이 있습니다 & "Screenings"

미리 감사드립니다.

출처

2013-09-23 Scrub Brush Productions

width: 100%; max-width: 900px;을 사용하고 이에 대한 문제가 있으므로 min-width: 0px;을 정의해야합니다.

출처

2013-09-23 03:47:47

고마워요! 방금 시도했지만 이전과 같은 결과를 얻었습니다. 탭은 항상 900px에서 머무르는 것처럼 보입니다. –

아직 운이 없습니다. 최소 너비는 아무 것도 변경하지 않았습니다. –

귀하의 사이트에서 최대 너비를 정의하지 않으 셨는지 확인하십시오. –

display: inline-block;은 요소가 컨테이너의 너비가 아닌 내용의 너비에 걸쳐 있도록합니다. display: inline-block;을 .TabbedPanelsContent과 .TabbedPanelsContentGroup에 추가 한 다음 text-align: center;에 .TabbedPanels을 추가하면 내용의 너비에 따라 다양한 너비의 탭 상자가 나타납니다 (가운데에 정렬 됨).

출처

2013-09-23 04:45:39 essmahr

도움 주셔서 감사합니다! –

탭 클래스의 너비를 제거하고 더하기 margin:0 auto;padding:3px

출처

2013-09-23 12:27:00

고마워요! 나는 그것을 시도 할 것이다. –

탭 패널의 각 탭에 대한 너비 자동 조정

답변

관련 문제