对齐右侧的html表单（jQuery mobile）

我只想将右侧的HTML表单（在地图下）移动。我试图使用align="right"但没有任何变化。这是我的完整代码。你可以运行它看看它的外观：地图显示也很奇怪，但这是另一个问题。对齐右侧的html表单（jQuery mobile）

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Finding the best location</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" /> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /> 
<![endif]--> 

<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script> 


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 

</head> 

<body> 
<div data-role="page"> 
<div data-role="header"> 
<div data-role="content" > 

     <h1>Location suitability application</h1> 
    </div><!-- /header --> 
    <div id="mymap" style="height:300px;width:700px""></div>    

<form name="theform" > 
     <table width="600"> 
     <tr> 
      <td width="400" align="left"> 

      <td width="9"> 
      <td width="224"> 
      <b>Business importance factor:</b> 
      <SELECT name="busfac"> 
      <OPTION selected value="1">1</OPTION> 
      <OPTION value="2">2</OPTION> 
      <OPTION value="3">3</OPTION> 
      <OPTION value="4">4</OPTION> 
      <OPTION value="5">5</OPTION> 

      </SELECT> 
     </tr> 

     <tr> 
      <td width="154" align="left"> 
      <td width="9"> 
      <td width="224"> 
      <b>Neighborhood importance factor:</b> 
      <SELECT name="neifac"> 
      <OPTION selected value="1">1</OPTION> 
      <OPTION value="2">2</OPTION> 
      <OPTION value="3">3</OPTION> 
      <OPTION value="4">4</OPTION> 
      <OPTION value="5">5</OPTION> 
      </SELECT> 
     </tr> 

     <tr> 
      <td width="154" align="left"> 
      <td width="9"> 
      <td width="224">  
      <input type="button" Value="Store point" 
      onclick="insertW(this.form.busfac.value,this.form.neifac.value);"/> 
     </tr> 

     <tr> 
      <td width="154" align="left"> 
      <td width="9"> 
      <td width="224">  
      <input type="button" Value="Calculate best location" 
      onclick="nese(handleLoc);"/> 
     </tr> 
     <tr> 
     <td width="154" align="left"> 
      <td width="9"> 
      <td width="224">  
      <p> Your Latitude is: <b id="C1" name="Latitude"> </b> </p> 
      <p> Your Longitude is: <b id="C2" name="Longitude"> </b> </p> 
     </tr> 
     </table> 




     <td width="154" align="left"> 
      <td width="9"> 
      <td width="224">  
      <input type="hidden" name="gjer" id="gjerId" /> 
     </tr> 

     </form> 

     <script> 


function mark(p) { 
theMarker=new L.Marker(p); 
map.addLayer(theMarker); 
theMarker.bindPopup("You are here"); 
} 

function handleLoc(pos) { 
var a=pos.coords.latitude; 
var b=pos.coords.longitude; 
var p = new L.LatLng(+a, +b); 
mark(p); 
document.getElementById("C1").innerHTML; 
document.getElementById("C2").innerHTML; 
} 



function handleErr(pos) { 
document.write("could not determine location"); 
} 

if (navigator.geolocation) { 
navigator.geolocation.watchPosition(handleLoc, handleErr); 
} else { 
document.write("geolocation not supported"); 
} 

var map = new L.Map('mymap'); 
var osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png"; 
var osmCopyleft = "Map data &copy;2012 OpenStreetMap contributors"; 

var osmLayer = new L.TileLayer(osmTile, { 
    attribution: osmCopyleft 
}); 
map.addLayer(osmLayer); 
map.setView(new L.LatLng(41.33,19.8), 13); 


    </script> 
     </div><!-- /content --> 
     <div data-role="footer"> 
     <h4>Page Footer</h4> 
     </div> 
    </div> 
</body> 
</html>

来源

2012-08-13 multigoodverse

在你CSS文件，请尝试：

float: right;

来源

2012-08-13 13:56:01 Oritm

感谢您的答复。首先，我对CSS一无所知。我创建的唯一脚本是包含上述代码的脚本。在这个脚本中，我只包含了两个CSS链接 - 一个用于JQuery mobile [“href =”http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css“]和一个用于地图[“href =”http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css“]。我应该创建这些脚本，将它们放在我的本地文件夹中，并尝试将您的“float：right;？” – multigoodverse 2012-08-13 14:16:19

H1下面的关闭DIV标记关闭了CONTENT div，而不是HEADER div，因为您的代码中的注释建议。这可能会导致你的问题。 – 2012-08-13 14:20:58

好的观察！我修好了。页面颜色从黑色变成了白色，但是按钮位置没有改变。 – multigoodverse 2012-08-13 14:33:51

对齐右侧的html表单（jQuery mobile）

回答

相关问题