在右侧对齐 html 表单（JQuery 移动版）答案

【问题标题】：Align html form on the right (JQuery mobile)在右侧对齐 html 表单（JQuery 移动版）
【发布时间】：2012-08-09 18:22:24
【问题描述】：

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

<!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>

【问题讨论】：

标签： jquery html forms alignment

【解决方案1】：

在您的 CSS 文件中，尝试：

float: right;

【讨论】：

感谢您的回复。首先，我对CSS一无所知。我创建的唯一脚本是包含上述代码的脚本。在这个脚本中，我只包含了两个 CSS 链接 - 一个用于 JQuery 移动 ["href="code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"]，另一个用于地图 ["href="cdn.leafletjs.com/leaflet-0.4.4/leaflet.css"]。我应该创建这些脚本，把它们放在我的本地文件夹中，然后尝试把你的“float:right; ?
H1 下方的关闭 DIV 标签是关闭 CONTENT div，而不是您在代码中的注释所建议的 HEADER div。这可能会给您带来问题。
好观察！我修好了它。页面颜色从黑色变为白色，但按钮位置没有改变。
不错 :) 您现在可以添加 float:right;。将更改为让我知道它是否有效
我将
改为：

并且我得到了页面右侧的所有按钮。但我希望他们在左边。因此，当我执行“align=left”时，按钮不会转到最左边。他们向左走一点，但停留在地图的尽头。地图下方似乎有些东西不允许按钮位于其下方。