Question

我正在尝试转换以前基于表格的布局标签。除了在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

Answer 1

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

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

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

1 个答案: