How to display List elements horizontally(using CSS probably) in a JQTouch toolbar

JavaScript
1

I have a <‘div’> element, containing a <‘ul’> with four <‘li’> elements. What I need to do is set the <‘li’> to display in horizontal orientation, and within the <‘div’>. When I apply the JTouch class=“toolbar” to my <‘div’>, what I see happening however is the the <‘li’> elements do not even appear within the perimeter of the <‘ul’> and both the <‘ul’> and <‘li’> seem to move outside of the parent <‘div’>. How can I fix this situation please?

jQTouch — jQuery plugin for mobile web development

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

<html>
    <head>

          <style type="text/css" media="screen">
                @import "../../jqtouch/jqtouch.css";
          </style>
          <style type="text/css" media="screen">
                @import "../../themes/apple/theme.css";
          </style>
          <script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
          <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
          <!--
               Tweet consumption in progress:
            -->
          <link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
          <!--
              Initialization:
            -->
          <script type="text/javascript" charset="utf-8">
                $.jQTouch({
                      icon: 'icon.png',
                      startupScreen: 'img/startup.png'
                });
          </script>
          <style type="text/css">
                .toolbar2
                {
                      background: green;
                      height: 30;
                }
         #toolbarbottom ul li{float:left; padding:3px 5px;}
                        #toolbarbottom ul {list-style-type:none;background-color:Green;background-color:Purple;}

          </style>
          <script type="text/javascript">
                $(document).ready(function () {
                      var ulhtml = "<ul>";
                      $.getJSON("http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&amp;callback=?", function (data) {
                            $.each(data, function (i, item) {
                                  ulhtml += "<li class='arrow'>" + item.text + "</li>";
                            });
                            ulhtml += "</ul>";
                            $("#tweets").html(ulhtml);
                      });
                });
          </script>

    </head>
    <body>
          <div id="jqt">
                <div id="home">
                      <div id="toolbartop" class="toolbar">
                            <h2>
                                  Tweet </h2>
                            <a href="#add" class="button"> +</a>
                      </div>
                      <h2>
                            Most Recent Tweet</h2>
                      <div id="tweets">
                      </div>
                      <div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
                            width: 100%;">
     <div style="background-color:Black;">
                                  <ul  >
                                        <li id="active"><a id="current" href="#add" class="button">News</a></li>
                                        <li><a href="#add" class="button">Updates</a> </li>
                                        <li><a href="#add" class="button">Contact Us</a></li>
                                        <li><a href="#add" class="button">Website</a> </li>
                                  </ul>
     </div>

                      </div>
                       <div class="info">
                            This is a demo for jQTouch.
                      </div>
                </div>
                <div id="info">
                      <div class="toolbar">
                            <h1>
                                  About</h1>
                            <a href="#add" class="cancel">Cancel</a>
                      </div>
                      <div class="info">
                            This is a demo for jQTouch.
                      </div>
                </div>

          </div>
    </body>

</html>
2

The normal way to do that is to use CSS to set the li elements to display inline.

3

I did add that to the code if you look at what I have there. But it seems that is not enough in this case. And I would appreciate any suggestions on how to solve this please.

Here is a link to a picture of the problem

On the bottom far right of the image, you can see my horizontal list elements all clumped in the corner.

4

This is a part of the CSS being used. I am not certain why it did not show up above.

#toolbarbottom ul li
{
display:inline;
float: left;
list-style-type: none;
padding: 3px 5px;
}