Geek Answers Handbook

HTML aligns text left and right on one line

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

  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 placed between the tags and placed in a table in the body. The problem I ran into is that the text output ($ filename and $ date) are not aligned on the same line. They appear one line below each other, but $ filename aligns to the left, and $ date aligns to the right. Also, the following resulting output is pretty removed, and I would like them to be more concise.

Current:

Filename
                         Date

Filename
                         Date

I want:

Filename            Date
Filename            Date

, , , , , !

+4
1

:

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>';

css:

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

More articles:


All Articles