對齊右側的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）

回答

相關問題