旧答案

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）浏览器中完美运行。表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。

在phonegap的水平滚动视图

1 个答案:

旧答案

更新了新答案