如何在JQTouch工具栏分区中水平显示List元素(可能使用CSS）

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

本文关键字：元素 CSS List 显示 JQTouch 工具栏分区水平更新时间：2023-09-26

我有一个<div>元素，包含一个带有四个<li>元素的<ul>。我需要做的是将<li>设置为在水平方向和<div>内显示。当我将JTouch class=工具栏应用于<div>时，我看到的是<li>元素甚至没有出现在<ul>的周边内，并且<ul>和<li>似乎都移动到父<div>之外。请问我该如何解决这种情况？

问题图像（右下角是列表元素，而不是出现在div和ul中）

  <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
        {
              display:inline;
              float: left;
              padding: 3px 5px;
        }
        #toolbarbottom ul
        {
              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&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>

将所有li向左浮动并填充。

我用html实现了它。查看并相应地更改代码。

    <style type="text/css">
        .toolbar ul li{float:left; padding:3px 5px;}
                    .toolbar ul {list-style-type:none;
    </style>

尝试：

.toolbar ul{
    display: inline;
    list-style-type: none;
}