HTML 单选按钮与 div 的关联

我有两个单选按钮和两张地图。我想在每张地图下方显示每个单选按钮。地图应并排显示。我试过但没有成功。单选按钮显示在不相关的位置。你能帮帮我吗？

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="inital-scale=1.0 , user-scalable=no" />
     <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>
            <script >
            function initialize() {
                var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);
                var mapOptions = {
                    zoom: 10,
                    center: fenway,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
              var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions);
            }
        </script>
    </head>
    <body onload="initialize()">

      <form >
        <div class="left-div" id="map_canvas" style="width: 500px; height: 500px;"></div>
        <input type="radio" name="A" id="choice1" value="c1" >A:
        <label for="choice1" >
        </label><br>
     <label for="choice2" >
          <input type="radio" name="B" id="choice2" value="c2" >B:
          <div class="right-div" id="map_canvas2" style="width: 500px; height: 500px;"></div>
        </label><br>
    </form>

这是 css

.left-div {
    float: left;
    margin-right: 8px;
}
.right-div {
    margin-left: 508px;
}

我会几乎完全重写html（你在那里有一些奇怪的排序，2张地图之间没有一致性）

你想做的是这样的：

<form>
    <div class="leftdiv>
        <div id="map1"></div>
        <input type="radio">A:
    </div>
    <div class="rightdiv">
        <div id="map2"></div>
        <input type="radio">B:<br>
    </div>
</form>

我会把细节和CSS留给你解决... 祝你好运:)

我想

这可以达到目的。我使用了 4 个div 并以固定宽度将它们浮动。（演示）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="inital-scale=1.0 , user-scalable=no" />
 <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>
        <script >
        function initialize() {
            var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);
            var mapOptions = {
                zoom: 10,
                center: fenway,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
          var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions);
        }
    </script>
</head>
<body onload="initialize()">

  <form >
    <div style="width:500px; float:left; height:600px" id="map_canvas"></div>
    <div style="width:500px; float:left; height:50px">     
    <input type="radio" name="A" id="choice1" value="c1" >A:<label for="choice1"></label><br>
    </div>
    <div style="width:500px; height:600px; float:left" id="map_canvas2"></div>
    <div style="width:500px; float:left; height:50px">          
    <label for="choice2" ><input type="radio" name="B" id="choice2" value="c2" >B:</label>
    </div>
</form>

相关内容

最新更新

热门标签：