调整窗口大小时浮动 ul 的 li 不保持内联答案

【问题标题】：Floating ul's li not staying inline when resizing the window调整窗口大小时浮动 ul 的 li 不保持内联
【发布时间】：2012-01-18 22:09:53
【问题描述】：

我正在尝试转换以前基于表格的布局选项卡。布局似乎在工作，除了在 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>

或这里的工作副本http://pastehtml.com/view/bl5bgt5le.html

【问题讨论】：

抱歉格式化。我尝试使用代码格式化程序，但它不起作用。最好观看演示。
固定格式。您可以使用 {} 图标来格式化文本块：) - 突出显示要格式化的文本，然后点击 {}

标签： css internet-explorer css-float

【解决方案1】：

只需给您的.navbar 一个相关宽度并将其浮动到右侧，如下所示：

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

【讨论】：