Question

我目前在为新网站编制导航栏时遇到了一些麻烦。我目前设置它，以便每个'链接'（当前没有超链接）是图像的形式。然后我使用一些免费的JavaScript代码来显示当前的UTC时间。

我希望链接（图像）显示在导航栏的中央，输出的时间显示在导航栏的右侧。我已设法使用

标记上的float:right;属性执行此操作，但这会导致居中的图像稍微向左移动。我一直试图阻止他们移动，但我没有成功，所以我在这里问。如果有人知道如何保持图像完全集中在javascript时间到右边那将是伟大的。谢谢！

HTML：

<html>
<head>
  <title>Personnel Tracking System - E-3+</title>
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

  <script language="JavaScript">
    function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; }
    function tN(){ return new Date(); }
    function lZ(x){ return (x>9)?x:'0'+x; }
    function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
    function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Arial color=white><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
    var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+'~'+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '";
  </script>

</head>
<body>

<div id="navbar">
  <center>
    <img src="images/homebutton.png" />
    <img src="images/e-3button.png" />
    <img src="images/resignedbutton.png" />
    <img src="images/firedbutton.png" />
    <img src="images/desertersbutton.png" />
    <img src="images/mosrosterbutton.png" />
    <img src="images/divider.png" />
    <p style="float:right;"><script language="JavaScript">dT();</script></p>
  </center>
</div>

</body>
</html>

CSS：

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #bababa;
}

#navbar {
    background: url(images/navbarbg.png);
    width: 100%;
    height: 55px;
    vertical-align: middle;
    margin: 0;
}

img {
    margin: 0;
    padding: 0;
}

Answer 1

也许是这样的：

#navbar {
  position: relative;
    background: url(images/navbarbg.png);
    width: 100%;
    height: 55px;
    vertical-align: middle;
    margin: 0;
}

#navbar p{
  position: absolute;
  top: 0;
  right: 0;
}

然后从p标签中移除浮动。定位绝对的东西会将其从容器的流中移除，因此它不会推动其他所有东西。

无法将文本浮动到图像旁边

1 个答案: