Floating ul's li не остается встроенным при изменении размера окна

Я пытаюсь преобразовать то, что раньше было вкладками макета на основе таблицы. Макет, похоже, работает, за исключением IE7 + 9 (не проверен 8), когда вы изменяете размер окна и делаете его более узким, чем вкладки, которые затем сдвигают их ниже, а не удерживают их все в одной строке и отображают полосу прокрутки. В ff9 он работает отлично.Floating ul's li не остается встроенным при изменении размера окна

<!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

Floating ul's li не остается встроенным при изменении размера окна

ответ

Смежные вопросы