윈도우의 크기를 재조정 할 때 ul의 플로팅이 인라인되지 않음

테이블 기반의 레이아웃 탭으로 변환하려고합니다. 레이아웃은 윈도우 크기를 조정할 때 IE7 + 9 (시도하지 않음 8)를 제외하고는 작동하는 것처럼 보입니다. 탭보다 좁게 만들면 같은 줄에 모든 것을 유지하고 스크롤바를 표시하는 대신 아래로 이동합니다. ff9에서는 완벽하게 작동합니다. 윈도우의 크기를 재조정 할 때 ul의 플로팅이 인라인되지 않음

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
/****************************************** 
User Control Panel 
******************************************/ 
    .userCtrlPanel{ 
     float:right; 
    } 
/****************************************** 
Navbar 
*******************************************/ 
    .navbar{ 
     clear:both; 
    } 
    .navbar ul{ 
     list-style:none; 
     float:right; 
     margin:0px; 
    } 
    .navbar ul li{ 
     float:left; 
     /*border:1px green solid;*/ 
     padding-left:15px; 

    } 
    ul.navbar li a{ 
     text-decoration:none; 
    } 
/*Current Tab */ 
    .currentTab{ 
     background-image:url(StandardTabCurrentRight.gif); 
     /*border:1px solid red;*/ 
     background-position:right; 
     background-repeat:no-repeat; 
     padding-right:12px; 
     padding-top:2px; 
     /*color:#fff;*/ 
    } 
    .currentTabLeft{ 
     background-image:url(StandardTabCurrentLeft.gif); 
     background-repeat:no-repeat; 
     /*border:1px solid blue;*/ 
    } 
    .currentTabRight{ 
     background-image: url(StandardTabCurrentBackground.gif); 
    /* border:1px solid purple;*/ 
    } 
/*Non-current tab*/ 
    .nonCurrentTab{ 
     background-image:url(StandardTabNonCurrentRight.gif); 
     /*border:1px solid red;*/ 
     background-position:right; 
     background-repeat:no-repeat; 
     padding-right:12px; 
     padding-top:2px; 
     /*color:#AAAAAA;*/ 
    } 
    .nonCurrentTab:hover{ 
     color:blue; 
    } 
    .nonCurrentTabLeft{ 
     background-image:url(StandardTabNonCurrentLeft.gif); 
     background-repeat:no-repeat; 
     /*border:1px solid blue;*/ 
    } 
    .nonCurrentTabRight{ 
     background-image:url(StandardTabNonCurrentBackground.gif); 
    /* border:1px solid purple;*/ 
    } 
/*Horizontal Ruler*/ 
    .headerHR { 
     height:8px; 
     background-image:url(ParentTabBase.gif); 
     clear:right; 
    } 
</style> 
</head> 

<body> 

    <div class="userCtrlPanel"> 
     USERNAME 
    </div> 

<!--Tabs --> 
    <div class="navbar"> 
     <ul> 
      <li class="currentTabLeft"> 
       <div class="currentTabRight"> 
        <a href="#" class="currentTab">Home</a> 
       </div> 
      </li> 
      <li class="nonCurrentTabLeft"> 

       <div class="nonCurrentTabRight"> 
        <a href="#" class="nonCurrentTab">Reports</a> 
       </div> 
      </li> 
      <li class="nonCurrentTabLeft"> 
       <div class="nonCurrentTabRight"> 
        <a href="#" class="nonCurrentTab">Admin</a> 
       </div> 

      </li> 
     </ul> 
    </div> 
    <div class="headerHR"></div> 
</body> 
</html>

또는 여기 http://pastehtml.com/view/bl5bgt5le.html

출처

2012-01-18 Alistair Laing

죄송합니다. 코드 포맷터를 사용해 보았지만 작동하지 않습니다. 데모를 가장 잘 볼 수 있습니다. –

고정 서식. {} 아이콘을 사용하여 텍스트 블록의 서식을 지정할 수 있습니다. :) - 서식을 지정할 텍스트를 강조 표시 한 다음 {}을 클릭하십시오. – mkk

작업 사본은 그냥 .navbar 관련 폭을 줄과 같이, 오른쪽으로 플로트 : 형식에 대한

.navbar { 
width:300px; 
float:right; 
}

출처

2012-01-18 14:09:53

윈도우의 크기를 재조정 할 때 ul의 플로팅이 인라인되지 않음

답변

관련 문제