显示与两个 <pre> 标签对齐

Question

我有 2 个单独的字段需要在两个不同的 'pre' 标签中显示。我需要像这样垂直显示它们：

第一首歌

铃儿响叮当铃儿响叮当
一路叮当
哦，骑车多有趣啊
在一匹马拉开的雪橇里
第二首歌

祝您圣诞快乐
祝您圣诞快乐
祝您圣诞快乐
新年快乐！

但它们显示为：

1. First Song
                                              2. Second Song 
        Jingle Bells Jingle Bells
        Jingle all the way                        We wish you a Merry Christmas
        Oh what fun it is to ride                 We wish you a Merry Christmas
        In a one horse open sleigh                We wish you a Merry Christmas
                                                  and a Happy New Year!

这是我使用的HTML（pre中的值实际上来自数据库源）

<!DOCTYPE html>
<html>
    <head>
        <style>
            pre {
                  display: block;
                  white-space: pre-wrap;
                  margin: 1em 0;
                 } 
        </style>
    </head>
    <body>

        <p>My pre-formatted data should display vertically:</p>
        <div style="float:left; display:block;">
            <label>1. First Song</label>
            <pre>
               Jingle Bells Jingle Bells
               Jingle all the way
               Oh what fun it is to ride
               In a one horse open sleigh
            </pre><br/>
        </div>
        <div style="float:left; ">&nbsp;</div>

        <br/>
        <div style="float:left;">
            <label>2. Second Song</label>
            <br/>
            <pre>
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               and a Happy New Year!
            </pre>
        </div>
        <div style="float:left; ">&nbsp;</div>

    </body>
</html>

感谢您的帮助，我已经用谷歌搜索了一段时间。

Answer 1

问题是float:left。

去掉就好了

像这样：

<!DOCTYPE html>
<html>
    <head>
        <style>
            pre {
                  display: block;
                  white-space: pre-wrap;
                  margin: 1em 0;
                 } 
        </style>
    </head>
    <body>

        <p>My pre-formatted data should display vertically:</p>
        <div style=" display:block;">
            <label>1. First Song</label>
            <pre>
               Jingle Bells Jingle Bells
               Jingle all the way
               Oh what fun it is to ride
               In a one horse open sleigh
            </pre><br/>
        </div>
        <div style="">
            <label>2. Second Song</label>
            <br/>
            <pre>
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               and a Happy New Year!
            </pre>
        </div>
        <div style="float:left; ">&nbsp;</div>

    </body>
</html>

Answer 2

如果要垂直显示它们，则可以删除 float: left。您也可以从 div 中删除 display: block。 div 是块级元素：

pre {
  display: block;
  white-space: pre-wrap;
  margin: 1em 0;
}

<p>My pre-formatted data should display vertically:</p>
<div>
  <label>1. First Song</label>
  <pre>
               Jingle Bells Jingle Bells
               Jingle all the way
               Oh what fun it is to ride
               In a one horse open sleigh
            </pre>
  <br/>
</div>
<div>&nbsp;</div>

<br/>
<div>
  <label>2. Second Song</label>
  <br/>
  <pre>
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               We wish you a Merry Christmas
               and a Happy New Year!
            </pre>
</div>

Answer 3

您不需要任何花车，还要确保删除 pre 元素内的 white-space 以确保歌曲标题与 headers 对齐。向 pre 元素添加一些填充以确保一切都是 line-up。将 white-space: pre-line 添加到 pre 元素也会删除 white-space。

pre {
  padding-left: 16px;
  white-space: pre-line;
}

div {
  margin-bottom: 26px;
}

<p>My pre-formatted data should display vertically:</p>
<div>
    <label>1. First Song</label>
    <pre>
      Jingle Bells Jingle Bells
      Jingle all the way
      Oh what fun it is to ride
      In a one horse open sleigh
    </pre>
</div>
<div>
    <label>2. Second Song</label>
    <pre>
      We wish you a Merry Christmas
      We wish you a Merry Christmas
      We wish you a Merry Christmas
      and a Happy New Year!
    </pre>
</div>

显示与两个 <pre> 标签对齐

Display alignment with two <pre> tags

html

pre