将单词拆分为span并在div中对齐

Question

I'm getting paragraph value from MySQL using PHP. I need to display like this link. My code is,

<?php
        $sql = "select `content` from `content` where id='1'";
        $data = mysql_query($sql);

    while($row = mysql_fetch_array($data))
    {
        $content1 = $row[0];
    }
    $content2 = explode(" ", $content1);
    $content = "";
    $count = 1;
    foreach($content2 as $content3)
    {
        $content .= '<span id='.$count.' >'.$content3.'</span>';
        $count++;
    }

    echo "<div class='data_pre'>";
    echo $content;
    echo "</div>";
?>

I need span for every word. But It showing same one line. It's not coming next line. See the link.

Where is problem? Thanks...

Answer 1

ooh, sorry, with: "its not showing next line" I was sure you want to have every word on a new line. try this: http://jsfiddle.net/GfVLP/13/

.data_pre span {
    display:inline-block;
    margin-right:10px;
}

http://jsfiddle.net/GfVLP/2/

you have to use

   .data_pre span {
       display:block;
    }

because span is an inline-element

and here an update, the height:140px; to the parent div was the matter that not everything was showing http://jsfiddle.net/GfVLP/12/