Question

我有一个<td>设置为显示div#time2的表格，其中填充了数据库[LastBuild]的时间。下面是一个包含div#time的段落，其中填充了当前时间。我的问题是#time2和[LastBuild]没有在同一行上对齐; [LastBuild]显示在#time2下面。我需要在同一行上的那两个（段落之后的第二部分已经做了我想要的）。

<table style="border-style:none; width:850px; border-spacing:0; border-collapse:collapse;">
    <tr>
        <td style="float:left; background-color:#000000;color:#FFFF00; width:335px; text-align:left; font-size:10;">By TrueLogic Company
            <p>Edited By International Electronic Components</p>
        </td>
        <td width="200"></td>
        <td style="float:right;background-color:#000000;color:#FFFF00; width:235px; text-align:right; font-size:10;">
            <div id="time2"></div>
            [LastBuild]
            <p>
                <div id="time" align="right" style="background-color:#000000;color:#FFFF00;"></div>
            </p>
        </td>
    </tr>
</table>

以下是提供div s的JavaScript：

var mydate=new Date();
var year=mydate.getYear();
if (year < 1000) year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10) daym="0"+daym;
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray=new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var s=date.getSeconds();
s = s < 10 ? '0'+s : s;
var Time = "Current Time:  ";
var Text = "Last Update:  ";

document.getElementById('time').innerHTML =Time+" "+dayarray[day]+" "+montharray[month]+"/"+daym+"/"+year+" "+hours+":"+minutes+":"+s+" "+ampm; 
document.getElementById('time2').innerHTML =Text+" "+dayarray[day];

Answer 1

#time2，div，默认为display:block，这会导致在换行后显示任何内容。要解决这个问题，请使用此CSS（除了此元素已有的内容）：

#time2 {
    display:inline-block;
    *display:inline;
    zoom:1;
}

我忘记了IE的旧版本。最后两行应该照顾它;有关解释，请参阅this answer。

在我留下你的问题的评论的后续行动中，我创建了an example我认为你的意图。我改变了一些标签。表格实际上是表格数据，因此在这种情况下，div似乎更合适。我解释了我在评论中所做的所有CSS更改。如果您愿意，请随意使用！如果它合适，它会更清洁。

更新： Microsoft claims IE 5.5+支持inline-block（我认为，这称为IE 6）。

Answer 2

删除<p>标记b / w两个div，因为p导致破解换行符

<Td style="float:right;background-color:#000000;color:FFFF00; width:235px; text-align:right; font-size:10;"><div id="time2"></div> [LastBuild] **<p>** <div id="time" align="right" style="background-color:#000000;color:FFFF00;"></div></td>

在同一行</div>上对齐和<div>

2 个答案: