在我的 phonegap 应用程序中，我想实现水平 ScrollView 。我的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”，我得到了水平滚动，但问题是我屏幕的其余部分也在水平滚动，所以有什么方法可以实现这一点吗？
最佳答案
旧答案
新的 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 解决方案的人)
这将在手机(安卓)浏览器中完美运行。 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。
关于android - phonegap 中的水平 ScrollView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12072532/