HTML выравнивание текста влево и вправо на той же строке

Question

Я надеюсь найти лучший способ сделать это, но прямо сейчас, по необходимым причинам, у меня есть скрипт perl, который выводит html-код. Одна из субмарин использует цикл для перебора через каталог и распечатать имя файла с последнего изменения:

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 

Кроме того, я знаю, что это все еще находится на стадии приблизительным, поэтому любые предложения о том, как сделать это чище и лучше высоко приветствуется!

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