Trying to figure out how to display thumbnails in a horizontal line or vertical line

See more:

C#

CSS

Ajax

jQuery

Trying to figure out how to display thumbnails in a horizontal line or vertical line
I am work with ajax c# jquery and css. I create the following div:

<div class="ThumbNailNav">
      <div id="thumbimg">
      </div>
      </div>

CSS code:

.ThumbNailNav 
       {
       position:relative; width:700px; height:500px; margin:0px auto 0 auto; border:5px solid #fff; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
       overflow:scroll;
       display:none;
       overflow-x:hidden;
        }
        #thumbimg 
        {
            position:absolute;  
        }
        
        #tblThumbs
        {
            position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; display:inline; 
        }
        
        #tblThumbs a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}

My jquery code is this:

$("#ThumbNails").bind("tap", function (html) {
               lastShown = CurrentPage;
               PopulateThumbsEx(BookID, lastShown);
               $("#book").fadeOut("fast");
               $(".ThumbNailNav").fadeIn(500);
               $("#thumbimg").append(html).prepend(thumbnails);
               $("#thumbimg").fadeIn(1000);


           });

My ajax code is this:

function PopulateThumbsEx(BookID, lastShown) {
            var tag = $("<div></div>");
            $.ajax({
                type: "POST", // AJAX type post
                url: "tabletbook.aspx/GetThumbNailPage",
                data: '{"BookID": "' + BookID + '",  "lastShown": "' + lastShown + '"}',
                contentType: "application/json; charset=utf-8", //This is required or you will get all sorts of strange things :-)
                dataType: "json", //We need to specifiy JSON as to have the AJAX serilize the data between Client and server 
                success: function (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
                    thumbnails = data.d; //Lets copy the links to a global array this gets set by the odd guy. andthen the even comes in right after and sets it
                    // so when the odd goes to render the global has the even values in it. hard to debug because you are introducing pauesse that won't exist normally ok.
                    //tag.html(data).dialog({ modal: true }).mobile.changePage('#ThumbNailNavDialog');
                   
                }
            });
        }

and my web method C# code is this:

//Load the thumbnails.
     [WebMethod(true)]
     public static string GetThumbNailPage(int BookID, int lastShown)
     {
         BookDC bdc = new BookDC();
         FlipBook book = bdc.GetBook(BookID);
         string s = book.ClientID.ToString();

         //Lets get a list to the thumbnail files
         List<string> tnFiles = Common.helpers.ExtractImagesFromFolder(HttpContext.Current.Server.MapPath("~/Clients/" + s + "/" + BookID.ToString() + "/Thumbs"));
         StringBuilder sb = new StringBuilder();
         string[] fileList = tnFiles.ToArray();
         Array.Sort(fileList, new Common.NaturalComparer());
         tnFiles.Clear();
         tnFiles.AddRange(fileList);
         sb.AppendLine("<ul style='margin-removedauto;margin-removedauto' width='100%' rel='{*}' id='tblThumbs' >");
         if (lastShown == tnFiles.Count)
         {
             lastShown = 0;
         }
         if (lastShown < 0)
         {
             lastShown = 0;
         }
         string PgNum = "";
         for (int r = 0; r < 4; r++)
         {
             sb.AppendLine("<li>");
             for (int c = 0; c < 10; c++)
             {
                 if (lastShown < tnFiles.Count)
                 {
                     FileInfo FI = new FileInfo(tnFiles[lastShown]);
                     string FileName = FI.Name; // get the
                     lastShown++;

                     PgNum = FileName.Substring(FileName.IndexOf("-") + 1);
                     PgNum = PgNum.Substring(0, PgNum.IndexOf("."));

                     sb.AppendLine("<a href='#'><img  class='thumbNailLink' title='" + PgNum + "' src='"
                         + "/Clients/" + s + "/" + BookID.ToString() + "/Thumbs/" + FileName + "' ></a>");
                 }
             }
             sb.AppendLine("</li>");
         }
         sb.AppendLine("</ul>");
         string retStr = sb.ToString().Replace("{*}", lastShown.ToString());
         return retStr;
     }

So I have two problems. One I have to click the the $("#ThumbNails"). image twice for the thumbnails to display.

The second is the display in a sqauare box. I would like for the to show up horizontal - a straight line.