如何在 JQTouch 工具欄 div 中水平顯示列表元素（可能使用 CSS）

Question

我有一個<div>元素，其中包含一個<ul>和四個<li>元素。 我需要做的是設置<li>以水平方向顯示，並在<div>內。 當我將 JTouch class=toolbar 應用於我的<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>

Answer 1

將所有 li 浮動到左側並給它們填充。

我在 html 中實現它。 查看並在您的代碼中進行相應更改。

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

Answer 2

嘗試：

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

如何在 JQTouch 工具欄 div 中水平顯示列表元素（可能使用 CSS）

問題描述

2 個解決方案

解決方案1
0 2011-06-28 05:08:54

解決方案2
0 2011-06-30 02:28:44

如何在 JQTouch 工具欄 div 中水平顯示列表元素（可能使用 CSS）

問題描述

2 個解決方案

解決方案1 0 2011-06-28 05:08:54

解決方案2 0 2011-06-30 02:28:44

解決方案1
0 2011-06-28 05:08:54

解決方案2
0 2011-06-30 02:28:44