HTML在同一行左右对齐文本

时间:2014-11-10 17:54:46

标签: html css perl

我希望找到更好的方法来做到这一点,但是现在,出于必要的原因,我有一个打印出html代码的perl脚本。其中一个subs使用for循环遍历目录并打印出具有上次修改日期的文件名:

  foreach my $result (@files) {
    if ($result =~ /\.txt/ ) {
      chomp $result;
      my $filename = basename($result);
      my $time = (stat("$result"))->[9] or die "$!";
      my $date = localtime $time;
      my $filestat = '<div style="text-align:left;">' . "$filename" . '</div><div style="text-align:right;">' . "$date" . '</div>';
      push(@final_result,$filestat);
    }
  }
  my $final_result_stat = join('<br>',@final_result);
  my $header = '<p style="text-align:left;">File Name<span style="float:right;">Last Modified Date</span></p>';
  return "$header" . "$final_result_stat";
}

生成的html输出放在标签之间并放在正文中的表中。我遇到的问题是文本输出($ filename和$ date)没有在同一行上对齐。它们似乎是彼此之间的一条线,但$ filename左对齐,$ date对齐。此外,下一个产生的输出是相当远的距离,我希望它们更加精简。

Current:

Filename
                         Date

Filename
                         Date

I want:

Filename            Date
Filename            Date

此外,我知道这仍处于粗暴阶段,因此欢迎任何关于如何使这种更干净和更好的建议!

1 个答案:

答案 0 :(得分:3)

您必须转换此行:

my $filestat = '<div style="text-align:left;">' . "$filename" . '</div><div style="text-align:right;">' . "$date" . '</div>';

要:

my $filestat = '<div class="filename">' . "$filename" . '</div><div class="date">' . "$date" . '</div>';

并添加以下css:

.filename {
  display: inline-block;
  width: 30%;
}
.date {
  display: inline-block;
  width: 70%;
}