Css 右浮动不适用于导航菜单（Chrome）_Css_Google Chrome_Css Float

Css 右浮动不适用于导航菜单（Chrome）

css google-chrome

Css 右浮动不适用于导航菜单（Chrome）,css,google-chrome,css-float,Css,Google Chrome,Css Float,我为我们的内部用户提供了一个简单的intranet页面，它只是一个顶部导航栏，可以在iFrame中打开每个页面我有一个二级导航栏，用于我们的内部IT，通过菜单中的安全“管理员”链接访问第二组站点。我希望“管理”链接在最右边，其他链接像往常一样堆叠在左边下面是结果。它在Firefox和IE中运行良好，选项堆叠在左边，最右边是“Admin”链接，但在Chrome中，它只是忽略了float:right，并最终与其他选项堆叠在左边我的HTML技能非常基础，我不知道为什么 <style>

我为我们的内部用户提供了一个简单的intranet页面，它只是一个顶部导航栏，可以在iFrame中打开每个页面

我有一个二级导航栏，用于我们的内部IT，通过菜单中的安全“管理员”链接访问第二组站点。我希望“管理”链接在最右边，其他链接像往常一样堆叠在左边

下面是结果。它在Firefox和IE中运行良好，选项堆叠在左边，最右边是“Admin”链接，但在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>


html，正文
{
宽度：100%；
保证金：0；
填充：0；
}
#导航{
位置：绝对位置；
排名前3名；
宽度：100%；
浮动：左；
保证金：0；
填充：0；
列表样式：无；
背景色：#333333；
边框底部：1px实心#ccc；
边框顶部：1px实心#ccc；
}
#李海军{
浮动：左；
}
#李娜{
显示：块；
填充：4px15px；
文字装饰：无；
字体系列：Arial；
字体大小：无；
颜色：#FFFFFF；
}
#李海军{
文本对齐：居中；
浮动：对；
}
#导航李a：悬停{
颜色：#333333；
背景色：#fffFFF；}
函数urlChange（url）{
var site=url；
document.getElementById（'myframe'）.src=site；
}
用户内部网








赋予li
浮动权，而不是a
内部li

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

致：
原因是您将所有的li浮动到左侧，并在最后一个li内的锚上应用float:right
，该锚是向左浮动的，浮动到锚上对浮动li本身没有多大影响将浮动右移到li
而不是a
内部li

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

致：
原因是您将所有的li浮动到左侧，并在最后一个li内的锚上应用float:right
，这是浮动到左侧并浮动到锚上，对浮动li本身没有多大影响
每天学习新东西！很有魅力，谢谢@欢迎光临。：）每天学习新的东西！很有魅力，谢谢@欢迎光临。：）