html单选按钮与div对齐

我有两个单选按钮和两个地图。我想要显示每张地图下面的每个单选按钮。地图应该并排显示。我试过但没有成功。单选按钮出现在无关位置。你可以帮我吗？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; 

}

来源

2012-11-19 John Smith

您能够创建一个小提琴？ –

我想这会达到目的。我已经使用了4个div，并将它们以固定宽度左移。（DEMO）

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

来源

2012-11-19 19:59:37

地图应该并排。你能帮我解决吗？ –

这里你去http://jsfiddle.net/ZZUUE/2/ –

我会重写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为你工作......祝你好运:)

来源

2012-11-19 19:49:40 Richie

html单选按钮与div对齐

回答

相关问题