调整窗口大小时，浮动 ul 的 li 不会保持内联
我正在尝试转换曾经是基于表格的布局选项卡。当您调整窗口大小并使其比选项卡窄时，布局似乎可以正常工作，但在 IE7+9 中（未尝试过 8），然后将它们移动到下方，而不是将它们全部保留在同一行并显示滚动条。在ff9中它完美运行。
<!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>
I'm trying to convert what used to be a table based layout tabs. The layout appears to be working except in IE7+9 (not tried 8) when you resize the window and make it narrower than the tabs it then shifts them below rather than keeping them all on the same row and displaying a scrollbar. In ff9 it works perfectly.
<!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>
or a working copy here http://pastehtml.com/view/bl5bgt5le.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只需给你的
.navbar一个相关的宽度并将其浮动到右侧，如下所示：Just give your
.navbara relevant width and float it to the right, like so: