打印对齐不正确使用JavaScript和CSS

enter image description here I want to print content in a div using javascript and css.My main div is with id 'preview'.Content in a div taken from database using php and mysql.But in print page data get vertically,not in correct position

My page image and print image are

page image

print image enter image description here

My code is given below

      <?php
  error_reporting(0);
  $host='localhost'; // Host Name.
  $db_user= 'root'; //User Name
  $db_password= '';
  $db= 'excel'; // Dat
  $conn=@mysql_connect($host,$db_user,$db_password) or die (mysql_error());
  mysql_select_db($db) or die (mysql_error());
  $sql = "select * from first order by id";
  $rsd = @mysql_query($sql);
  ?>

 <script type="text/javascript">
  function printDiv(divID)
   {
        var divElements = document.getElementById(divID).innerHTML;
        var oldPage = document.body.innerHTML;
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";
        window.print();
        document.body.innerHTML = oldPage;
     }
  </script>
 <style type="text/css" media="print">
 @media print{ #preview{ height:100%;overflow:visible;} } 
 </style>
 <style>
   #my-list{
   padding: 10px;
   padding-left:15px;
   width:auto;
   margin:auto;
   }
  #my-list > li {
   display: inline-block;
   zoom:1;
   *display:inline;
   }
  #my-list > li > a{
  color: #666666;
  text-decoration: none;
  padding: 3px 8px;
   }
  </style>

 <input type="button" value="Print" onClick="javascript:printDiv('preview')" />
 <div id="preview" style="width:1000px; margin:auto;">
 <ul id="my-list" >

    <?php  



    $si=1;

    while($fet=mysql_fetch_array($rsd))
    {
        ?>
             <li> 



           <div class="droppable2"  style="border-color:#3300FF; 
            border:solid #999999;  height:180px;width:180px;position:relative; " >
            <div style="float:left;position:absolute; bottom:30px;" class="left">


            </div>
            <div style="float:right;">
            <p style="color: #003399;  font-size: 10px;
              padding-right:5px; font-weight:800; ">www.selafone.net</p>
             <table style="font-size:10px;" >
             <tr> <td >USERNAME: </td> <td> <?php echo $fet['name']; ?> </td></tr>
              <tr> <td>PASSWORD:</td> <td> <?php echo $fet['email']; ?></td></tr></table>
            </div>
             <div  style="position:absolute;background-color:#FF0000;
              padding-bottom:0px; bottom: 0;  
              width: <?php echo $width;  ?>px; height:36px;  "><div style="color:#FFFFFF; padding-left:30px;
              vertical-align:middle;font-weight:100;padding-top:10px; 
              font-size: 8px;"><strong> International prepaid Calling Card</strong></div></div>
              </div>


      </li>
        <?php   
    $si=$si+1;  
    }

    ?>

    </ul>

    </div>

Any body give any solution ?

I couldn't replicate the exact problem you are facing, but I believe I traced the problem to your print 'innerHTML' replacement creating a document that doesn't have a 'doctype' which then conflicts with the descendant targeting you are doing on the list item.

The list item in the CSS is using 'display:inline-block' which is not being applied in the print view.

Try the CSS changes below:

#my-list li {
 display: inline-block;
 zoom:1;
 *display:inline;
}
#my-list li > a{
 color: #666666;
 text-decoration: none;
 padding: 3px 8px;
}

Hope this helps.