-3

任何人都可以移动地图下方左侧的表格吗？我真的很难，努力去做。我可以把它放在最右边，但不能放在最左边。它不会比地图更远（在地图下方）。

<!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">
    <h1>Location suitability application</h1>
        </div><!-- /header -->
    <div data-role="content" >



        <div id="mymap" style="height:300px;width:300px" align="right"></div>           

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

                <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>
            </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>
4

2 回答 2

0

你的问题不是很清楚你想如何布局页面（一些示例截图会有所帮助），但我会猜测一下。考虑使用 CSS 浮动属性和宽度（就像你正在做的那样）。

您可以在此处阅读有关 float的信息。

编辑以下评论：

查看您的示例，如果您将地图 div（id=mymap）向左浮动，然后将包含控件（标记为 data-role=content）的另一个 div 向左浮动，并为其赋予宽度，您应该会得到类似的东西.

于 2012-08-13T15:39:17.137 回答
0

使用float:left;属性..如果你在间距方面有问题你初始化margin:0px; padding:0px;然后float:left;

于 2012-10-18T11:09:00.160 回答