Question

我正在尝试将2选择列表视图添加到下面的page2页脚。我已修复页脚位置，列表视图和链接工作正常。我的问题是我无法找到一种方法来调整列表视图的大小，以扩展屏幕宽度，而不是添加文本。页脚中的列表视图“按钮”很小，我想控制它们的宽度。感谢

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

<script src="/phonegap.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
<div data-role="header">
    <h1>Page One</h1>
</div>
<div data-role="content">   
    <ul data-role="listview">
        <li><a href="#page2">Page Two</a></li>
        <li><a href="#page3">Page Three</a></li>
        <li><a href="#page4">Page Four</a></li>
    </ul>       
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
    <h1>Page Two</h1>
</div>
<div data-role="content">   
    Content     
</div>
 <div data-role="footer" align="center" data-position="fixed"  data-theme="c">   
  <ul data-role="listview" data-theme="b" data-inset="true">
    <li><a href="#page">Page One </a></li><br>
        <li><a href="#page3">Page 3</a></li>
  </ul>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
    <h1>Page Three</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page4">
<div data-role="header">
    <h1>Page Four</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

</body>
</html>

Answer 1

我最后添加了一个导航栏，可以完成我需要的操作。

jquery mobile将页面视图添加到页脚页面问题

1 个答案: