Question

我正在使用jquery mobile构建一个网站。我正在尝试定位按钮并调整它们的大小。这就是我到目前为止所拥有的。提前感谢您的帮助。如果有任何其他方法可以解决这个问题，请告诉我。我的问题是这两个按钮在给定位置时没有出现。

<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript">

$("#ui-1").css({'position':'relative','left':'400.0px','top':'5.0px','width':'450px','height':'250px',});

$("#ui-1.ui-btn-text").css({'font-family':'"Calibri","Arial","Sans Serif"','font-size':'1.75em','color':'black','text-align':'center','wordwrap':'normal','text-shadow':'1px 1px 1px #FFFFFF'});

$("#ui-2").css({'position':'relative','left':'15.0px','top':'-10.0px','width':'450px','height':'250px',});

$("#ui-2.ui-btn-text").css({'font-family':'"Calibri","Arial","Sans Serif"','font-size':'1.75em','color':'black','text-align':'center','wordwrap':'normal','text-shadow':'1px 1px 1px #FFFFFF'});


</script>


</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   

  <a id="ui-1" href="wines.html" data-role="button"   data-theme="c" > 
   <img src="image1.png" width="200" height="200 "> <br/> 
   Wines </a>
   <a id="ui-2" href="wines.html" data-role="button"   data-theme="c" > 
   <img src="image1.png" width="200" height="200 "> <br/> 
   Wines </a>

    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

如何在jquery mobile中定位按钮

0 个答案: