浮動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

很抱歉的格式。我嘗試使用代碼格式化程序，但它不工作。最好的觀看演示。 – 2012-01-18 13:48:33

固定格式。您可以使用{}圖標格式化文本塊:) - 突出顯示要格式化的文本，然後單擊{} – mkk 2012-01-18 14:14:49

的工作副本只是給你.navbar相關的寬度和它漂浮到右邊，就像這樣：

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

來源

2012-01-18 14:09:53

浮動ul的李不保持內聯時調整窗口大小

回答

相關問題