icons positioning.

icons positioning.

I'm new to jquery ui and using 1.8 with jquery 1.4.2. I have been googling all day, but haven't found an answer to how you position icons. I have five icons that I just want to put in a horizontal row. I've tried using background-position, absolute position, etc. No matter what I do I can only seem to get them in a vertical column. I can wrap a div around them and move the div and I seem to be able to reposition them vertically in that div, but can't get them to go horizontal. I've stripped my code down to minimum. Can some please advise me on how to reposition. Thanks.
***
  1. <!DOCTYPE html>
    <html>
    <head>
      <!-- css links -->

      <link href="jquery/css/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>

      <!-- jquery 1.4.2 / ui 1.8 -->
      <script src="jquery/js/jquery-1.4.2.min.js"></script>
      <script src="jquery/js/jquery-ui-1.8.custom.min.js"></script>
      </head>
      <body>
        <span id="span1" title="Add record"  class="ui-icon ui-icon-plus" ></span>
        <span id="span2" title="Edit record" class="ui-icon ui-icon-pencil"> </span>
        <span id="span3" title="Validate record"class="ui-icon ui-icon-check"> </span>
        <span id="span4" title="Save record." class="ui-icon ui-icon-disk"> </span>
        <span id="span5" title="Delete record" class="ui-icon ui-icon-trash"> </span>
      </body>
      </html>