css - 向右浮动不适用于导航菜单(Chrome)

标签 css google-chrome css-float

<分区>

我有一个供内部用户使用的简单 Intranet 页面,它只是一个顶部导航栏,可在 iFrame 中打开每个页面。

我有一个用于我们内部 IT 的辅助导航栏,通过菜单中的安全“管理员”链接可以访问第二组站点。我希望“管理”链接位于最右侧,而其他链接正常堆叠在左侧。

结果如下。它在 Firefox 和 IE 中运行良好,选项堆叠在左侧,最右侧的“管理”链接,但在 Chrome 中,它只是忽略 float: right 并最终堆叠在左侧,带有休息!

我的 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>

最佳答案

将 float 权赋予 li 而不是 li 内的 a

改变:

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

到:

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

Fiddle

原因是你将所有的 li 向左浮动并在最后一个 li 内的 anchor 上应用 float:right 向左浮动并在 anchor 上 float 没有太多对 float li 本身的影响

关于css - 向右浮动不适用于导航菜单(Chrome),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17181616/

相关文章:

jquery - 使用 ASP.NET 字段验证器通过 jQuery 更改输入 css/动画

javascript - Uncaught SyntaxError : Unexpected token (, no error visible

html - 使用百分比进行布局,但边栏的最小和最大宽度等

css - 如何强制div不 float

html - 水平弹出菜单 - 隐藏选项

html - z-index 和 overflow 不能使 div 正确显示

javascript - 如何在 Chrome 调试器中找到错误的 catch 语句?

google-chrome - 如何在 Chrome 调试器中查看 enctype = "multipart/form-data"的表单数据

html - 我如何设置 ul/ols 的样式以便能够灵活地环绕 float 内容?

html - 使输入范围 slider 占用所有可用空间