Question

我的内部用户只有一个简单的内部网页，它只是一个在iFrame中打开每个页面的顶部导航栏。

我的内部IT有一个辅助导航栏，第二组网站通过菜单中的安全“管理”链接进行访问。我希望“管理员”链接位于最右侧，其他链接位于左侧，正常情况下。

以下是结果。它在Firefox和IE中运行良好，选项位于左侧，最右边是“管理员”链接，但在Chrome中它只是忽略浮动：右侧，最后堆叠在左侧休息！

我的HTML技能非常基础，我不知道为什么会这样....

<style>
html, body
{
    width: 100%;
    margin:0;
    padding:0;
}

#nav {
position:absolute;
top:3;
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
List-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#nav li {
float: left;
}

#nav li a {
        display: block;
        padding: 4px 15px;
        text-decoration: none;
        font-family: Arial;
        font-weight: none;
        color: #FFFFFF;
         }

#nav li.last a {
    text-align: center;
    float: right;
}

#nav li a:hover {
        color: #333333;
        background-color: #fffFFF; }
</style>
<script type="text/javascript">
function urlChange(url) {
    var site = url;
    document.getElementById('myframe').src = site;
}
</script>
<html>
<head>
<title>User Intranet</title>
</head>
<body>
<ul id="nav">
        <li><a href="http://intranet/">Home</a></li>
        <li><a href="javascript:void(0);" onClick="urlChange('http://intranet/Coriander')">Coriander</a></li>
        <li><a href="javascript:void(0);" onClick="urlChange('http://intranet/Redmine')">Redmine </a></li>
        <li><a href="javascript:void(0);" onClick="urlChange('http://intranet/LabelsRegistry')">Labels Registry </a></li>
        <li><a href="javascript:void(0);" onClick="urlChange('http://intranet/sms')">SMS</a></li>
        <li class="last"><a href="http://intranet/it">Admin</a></li>
</ul>
<div style="position:absolute; top:35px; height:95%; width:100%"><iframe id="myframe" src="" style="width: 100%; height: 100%;" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"</iframe></div>
</body>
</html>

Answer 1

在li

内向a移动li

变化：

#nav li.last a {
   text-align: center;
    float: right;
}

为：

#nav li.last {
    text-align: center;
    float: right;
}

Fiddle

原因是你把你所有的李漂浮到左边，并且在最后float:right左边的锚点上应用li，左边浮动并且浮动锚点对浮动li本身没有多大影响

Float右侧不适用于导航菜单（Chrome）

1 个答案:

Fiddle