HTML将文本从左到右对齐到同一行

I am hoping to find a better way to do this, but right now, for necessary reasons, I have a perl script that prints out html code. One of the subs uses a for loop to iterate through a directory and print out the name of the file with the last modified date:

我希望找到一种更好的方法来实现这一点，但是现在，出于必要的原因，我有一个perl脚本打印出html代码。其中一个子程序使用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";
}

The resulting html output is put in between tags and placed in a table in the body. The issue I am having is the text output (the $filename and $date) are not aligned on the same line. They seem to be one line beneath each other but $filename is aligned left and $date is aligned right. Also, the next resulting output is quite far spaced and I would like them to be more condensed.

生成的html输出放在标记之间，并放在主体中的表中。我遇到的问题是文本输出($filename和$date)在同一行上没有对齐。它们之间似乎是一条线，但是$filename是对齐的，$date是对齐的。另外，下一个输出的间隔非常大，我希望它们更紧凑。

Current:

Filename
                         Date

Filename
                         Date

I want:

Filename            Date
Filename            Date

Also, I know this is still in its rough stages, so any suggestions on how to make this cleaner and better are highly welcomed!

而且，我知道这还处于初级阶段，所以任何关于如何使它更干净、更好的建议都是非常受欢迎的!

1 个解决方案

#1

You have to convert this line:

你必须转换这条线:

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

To:

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

And add the following css:

并添加以下css:

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

#1