Question

I have 2 separate fields I need to display within two different 'pre' tags. I need to display them vertically like:

First Song

Jingle Bells Jingle Bells
Jingle all the way
Oh what fun it is to ride
In a one horse open sleigh
Second Song

We wish you a Merry Christmas
We wish you a Merry Christmas
We wish you a Merry Christmas
and a Happy New Year!

But instead they display like:

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!

Here is the HTML I use (the values within the pre actually come from a database source)

<!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>

Thanks for any help, I've been googling this for awhile.

Answer 1

If you want to display them vertical then you can remove float: left. Also you can remove display: block from div. div is block level element:

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 2

You don't need any floats whatsoever, also make sure to delete the white-space inside the pre elements to make sure the song titles line up with the headers. Add some padding to the pre elements to ensure everything is line-up. Adding white-space: pre-line to the pre elements will delete the white-space, as well.

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>

Answer 3

The problem is the float:left.

Just remove it and you will be fine.

Like this :

<!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>

显示两个<pre> tags

3 个答案: