HTML如何在同一行左右对齐文本？

Question

HTML如何在同一行左右对齐文本？

4

我希望能找到更好的方法来完成这个任务，但现在出于必要的原因，我有一个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";
}

生成的HTML输出被放置在<html>和</html>标签之间，并放置在表格中的主体部分。我遇到的问题是文本输出（$filename和$date）没有对齐在同一行上。它们似乎是相互下面一行，但$filename向左对齐，$date向右对齐。另外，下一个生成的输出相距很远，我希望它们更加紧凑。

Current:

Filename
                         Date

Filename
                         Date

I want:

Filename            Date
Filename            Date

此外，我知道这仍处于初步阶段，因此非常欢迎任何有关如何使其更加清晰和完善的建议！

- Evan Miller

1

那是因为浮点数的缘故。尝试清除浮点数。 - Bhojendra Rauniyar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emmanuel · Accepted Answer

您需要将此行转换为:

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%;
}