内部ユーザー向けのシンプルなイントラネット ページがあります。これは、各ページを iFrame で開くトップ ナビゲーション バーです。
社内 IT 用のセカンダリ ナビゲーション バーがあり、メニューの安全な [管理者] リンクから 2 番目のサイトにアクセスできます。「管理者」リンクを右端に配置し、他のリンクは通常どおり左端に配置したいと考えていました。
以下は結果です。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>