phonegap 中的水平滚动视图

Question

在我的 phonegap 应用程序中，我想实现水平滚动视图。我的html代码

<div id="songsListPage" data-role="page">

    <div id="alphabets" > 
        <a href="#"  >#</a>
                    <a href="#" >A</a>
                    <a href="#"  >B</a>
                    <a href="#"  >C</a>
                    <a href="#"  >D</a>
                    <a href="#"  >E</a>
                    <a href="#"  >F</a>
                    <a href="#"  >G</a>
                    <a href="#"  >H</a>
                    <a href="#"  >I</a>
                    <a href="#"  >J</a>
                    <a href="#"  >K</a>
                    <a href="#"  >L</a>
                    <a href="#"  >M</a>
    </div>

<div id="songs_list" data-role="content"> <!-- this should not scroll, but it is and showing white background on right side -->

        <ul id="songsList" data-role="listview" data-theme="a"></ul> <!-- list is populated dynamically -->     

        <p>This is songs page</p>

        <a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
        </div>
</div>

我的 CSS

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: 30px;
    margin-bottom: 22px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: 200%;
    overflow-x: auto;
}
#alphabets a{ color: #ffffff; margin-left: 5px}

通过给出“width: 200%”和“overflow-x: auto”，我得到了水平滚动，但问题是我的屏幕的其余部分也在水平滚动，所以有什么办法可以做到这一点吗？

Answer 1

旧答案

新的 HTML

<div id="songsListPage" data-role="page">
<table id="alphabets"> <!-- change "div" tag to "table" tag -->
    <tr>
    <td href="#">#</td> <!-- and "a" to "td" tag -->
    <td href="#">A</td>
    <td href="#">B</td>
    <td href="#">C</td>
    <td href="#">D</td>
    <td href="#">E</td>
    <td href="#">F</td>
    <td href="#">G</td>
    <td href="#">H</td>
    <td href="#">I</td>
    <td href="#">J</td>
    <td href="#">K</td>
    <td href="#">L</td>
    <td href="#">M</td>
    <td href="#">N</td>
    <td href="#">O</td>
    <td href="#">P</td>
    <td href="#">Q</td>
    <td href="#">R</td>
    <td href="#">S</td>
    <td href="#">T</td>
    <td href="#">U</td>
    <td href="#">V</td>
    <td href="#">W</td>
    <td href="#">X</td>
    <td href="#">Y</td>
    <td href="#">Z</td>
    </tr>
</table>
<div id="songs_list" data-role="content">

<ul id="songsList" data-role="listview" data-theme="a"></ul>
<!-- list is populated dynamically -->     
<p>This is songs page</p>
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
</div>
</div> 

更新的 CSS

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: auto;  <!-- changed width from 200% to auto -->
    overflow-x: auto;
}
#alphabets td{ color: #ffffff; font-size: large; 
margin-left: 5px; padding-left: 5px; padding-right: 5px;} 
<!-- rest of the changes in css are for proper view (UI) like height: auto; padding-left: 5px; (in td) etc -->

http://jsfiddle.net/CXAWE/（对于那些不想要 TABLE TR TD 解决方案的人）

这将在手机 (android) 浏览器中完美运行。 Table TR 更适用于手机 - 它将一直如此，并将继续如此。我总是使用 TABLE 来保证结果，尤其是在这种情况下。

更新的新答案

适用于任何移动解决方案的 HTML。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Alternative to Mobile WAP and iPad/iPhone etc</title>
<!-- Mobile Web App Acceleration - Powered by WordCompress.net //-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all, handheld" />
</head>
<body>
<div id="b">
    <div id="content">
    </div>
</div>
</body>
</html>

CSS

body { overflow-x: hidden; }
#b {
    margin: 1px;
}
#content {
    background: none repeat scroll 0 0 #FFFFFF;
}

注意viewport 的宽度是device-width，同时注意主体没有宽度，内容也没有。您现在可以保证所有手机都将显示 100%。您也可以将overflow 更改为y 或x。