我为jpg图像创建了一个imageMap，每次点击图像的圆形区域时，我都会在图像上添加一个div。
每当我点击该区域时，图像一直向下移动，因此，div的位置会受到影响。我究竟做错了什么？
这是我的代码：
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="papaya.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="papaya.js"></script>
<style>
.jumbotron {
padding: 0.5em 0.6em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
#lymphNode img {
display:block;
margin-left: auto;
margin-right: auto;
}
.menuItem {
background-color: #e0e0ff;
width:299px;
height:137px;
border:2px solid #000;
}
.fontSize {
padding-top:50px;
color: #00000;
font-family: Georgia, Times, serif;
font-size: 200%;
text-align: center;
}
.menuItem:hover { -moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
}
.smallViewer {
margin-left:75px;width:700px;height:420px;
}
</style>
<script>
$(document).ready(function ()
{
$(".links").click(function ()
{
$visible = $("divs:visible");
$(".divs:visible").hide();
$("#" + $(this).attr("data-showdiv")).show();
});
$("map#imageMap").click(function (event) {
var target = $(event.target);
var targetId = target.attr('id');
var matches = targetId.match(/\d+/)[0];
$("#div" + matches).show();
});
$("img").click(function(event){
alert(event.pageX+ ' , ' + event.pageY);
});
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2 style="text-align:center;">Head And Neck Therapy </h2>
</div>
<div style="width:1140px; height:550px;border:2px solid #000;">
<div style="float: left">
<div style="width:300px; height: 550px;display: inline-block;">
<a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> </div> </a>
</div>
</div>
<div id="parentDiv" style="width:832px; height: 548px;display: inline-block;">
<div id="div1" title="node1" style="width:13px;height:13px;position:relative;top:190;left:485;background-color:#ff4c4c;opacity:0.5;display:none"></div>
<div id="div2" title="node2" style="width:13px;height:15px;position:relative;top:193;left:507;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div3" title="node3" style="width:15px;height:17px;position:relative;top:223;left:417;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div4" title="node4" style="width:15px;height:17px;position:relative;top:227;left:400;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div5" title="node5" style="width:12px;height:15px;position:relative;top:258;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div6" title="node6" style="width:12px;height:13px;position:relative;top:260;left:355;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div7" title="node7" style="width:13px;height:12px;position:relative;top:273;left:331;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div8" title="node8" style="width:13px;height:12px;position:relative;top:258;left:338;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div10" title="node10" style="width:13px;height:12px;position:relative;top:240;left:498;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div11" title="node11" style="width:13px;height:12px;position:relative;top:254;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div12" title="node12" style="width:13px;height:12px;position:relative;top:250;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div13" title="node13" style="width:10px;height:12px;position:relative;top:267;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div14" title="node14" style="width:12px;height:12px;position:relative;top:280;left:499;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div15" title="node15" style="width:16px;height:12px;position:relative;top:325;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div16" title="node16" style="width:13px;height:12px;position:relative;top:310;left:537;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div17" title="node17" style="width:13px;height:12px;position:relative;top:304;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div18" title="node18" style="width:11px;height:12px;position:relative;top:301;left:479;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div19" title="node19" style="width:13px;height:12px;position:relative;top:319;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div20" title="node20" style="width:13px;height:12px;position:relative;top:315;left:465;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div21" title="node21" style="width:13px;height:12px;position:relative;top:300;left:458;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div22" title="node22"style="width:13px;height:12px;position:relative;top:345;left:438;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div23" title="node23" style="width:13px;height:12px;position:relative;top:322;left:428;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div24" title="node24" style="width:11px;height:20px;position:relative;top:313;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div25" title="node25" style="width:13px;height:17px;position:relative;top:302;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div26" title="node26" style="width:13px;height:15px;position:relative;top:305;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div27" title="node27" style="width:13px;height:12px;position:relative;top:330;left:390;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div28" title="node28" style="width:13px;height:17px;position:relative;top:460;left:385;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div29" title="node29" style="width:13px;height:15px;position:relative;top:468;left:370;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div30" title="node30" style="width:13px;height:17px;position:relative;top:485;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;">
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">
<map id="imageMap" name="imageMap">
<area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
<area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
<area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
<area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
<area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
<area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
<area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
<area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
<area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
<area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
<area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
<area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
<area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
<area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
<area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
<area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
<area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
<area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
<area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
<area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
<area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
<area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
<area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
<area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
<area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
<area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
<area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
<area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
<area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
</map>
</img>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
答案 0 :(得分：0)
将parentDiv更改为position relative，将子div更改为相对位置。
这是代码
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="papaya.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="papaya.js"></script>
<style>
.jumbotron {
padding: 0.5em 0.6em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
#lymphNode img {
display:block;
margin-left: auto;
margin-right: auto;
position:auto;
}
.menuItem {
background-color: #e0e0ff;
width:299px;
height:137px;
border:2px solid #000;
}
.fontSize {
padding-top:50px;
color: #00000;
font-family: Georgia, Times, serif;
font-size: 200%;
text-align: center;
}
.menuItem:hover { -moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
}
.smallViewer {
margin-left:75px;width:700px;height:420px;
}
</style>
<script>
$(document).ready(function ()
{
$(".links").click(function ()
{
$visible = $("divs:visible");
$(".divs:visible").hide();
$("#" + $(this).attr("data-showdiv")).show();
});
$("map#imageMap").click(function (event) {
var target = $(event.target);
var targetId = target.attr('id');
var matches = targetId.match(/\d+/)[0];
if($("#div"+matches).css('display') != 'none')
{
$("#div" + matches).hide();
}
else {
$("#div" + matches).show();
}
});
$("#parentDiv div").click(function (event) {
var clicked = event.target;
var currentID = clicked.id || "No ID!";
alert(currentID);
});
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2 style="text-align:center;">Head And Neck Therapy </h2>
</div>
<div style="width:1140px; height:550px;border:2px solid #000;">
<div style="float: left">
<div style="width:300px; height: 550px;display: inline-block;">
<a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> Scan Images </div> </a>
<a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a>
<a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> Patient Details</div> </a>
<a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation </div> </a>
</div>
</div>
<div id="parentDiv" style="width:832px; height: 548px;display: inline-block;position:relative;">
<div id="div1" class="divs" title="node1" style="width:13px;height:13px;position:absolute;top:177;left:484;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div2" class="divs" title="node2" style="width:13px;height:15px;position:absolute;top:177;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div3" class="divs" title="node3" style="width:15px;height:17px;position:absolute;top:208;left:415;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div4" class="divs" title="node4" style="width:15px;height:17px;position:absolute;top:211;left:398;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div5" class="divs" title="node5" style="width:12px;height:15px;position:absolute;top:242;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div6" class="divs" title="node6" style="width:12px;height:13px;position:absolute;top:247;left:354;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div7" class="divs" title="node7" style="width:13px;height:12px;position:absolute;top:262;left:329;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div8" class="divs" title="node8" style="width:13px;height:12px;position:absolute;top:245;left:337;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div10" class="divs" title="node10" style="width:13px;height:12px;position:absolute;top:228;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div11" class="divs" title="node11" style="width:13px;height:12px;position:absolute;top:242;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div12" class="divs" title="node12" style="width:13px;height:12px;position:absolute;top:239;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div13" class="divs" title="node13" style="width:10px;height:12px;position:absolute;top:255;left:503;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div14" class="divs" title="node14" style="width:12px;height:12px;position:absolute;top:267;left:497;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div15" class="divs" title="node15" style="width:16px;height:12px;position:absolute;top:314;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div16" class="divs" title="node16" style="width:13px;height:12px;position:absolute;top:298;left:535;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div17" class="divs" title="node17" style="width:13px;height:12px;position:absolute;top:292;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div18" class="divs" title="node18" style="width:11px;height:12px;position:absolute;top:290;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div19" class="divs" title="node19" style="width:13px;height:12px;position:absolute;top:308;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div20" class="divs" title="node20" style="width:13px;height:12px;position:absolute;top:302;left:464;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div21" class="divs" title="node21" style="width:13px;height:12px;position:absolute;top:290;left:456;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div22" class="divs" title="node22"style="width:13px;height:12px;position:absolute;top:333;left:436;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div23" class="divs" title="node23" style="width:13px;height:12px;position:absolute;top:310;left:425;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div24" class="divs" title="node24" style="width:11px;height:20px;position:absolute;top:290;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div25" class="divs" title="node25" style="width:13px;height:17px;position:absolute;top:285;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div26" class="divs" title="node26" style="width:13px;height:15px;position:absolute;top:290;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div27" class="divs" title="node27" style="width:13px;height:12px;position:absolute;top:320;left:388;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div28" class="divs" title="node28" style="width:13px;height:17px;position:absolute;top:445;left:383;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div29" class="divs" title="node29" style="width:13px;height:15px;position:absolute;top:452;left:368;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div30" class="divs" title="node30" style="width:13px;height:17px;position:absolute;top:468;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div class="divs smallViewer" style="display:none;" id="viewer">
<div class="papaya"> </div>
</div>
<div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;">
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">
<map id="imageMap" name="imageMap">
<area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
<area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
<area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
<area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
<area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
<area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
<area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
<area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
<area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
<area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
<area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
<area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
<area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
<area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
<area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
<area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
<area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
<area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
<area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
<area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
<area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
<area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
<area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
<area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
<area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
<area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
<area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
<area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
<area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
</map>
</div>
<div id="userForm" class="divs" style="height:550px; width: 800px;display:none;">
<div class="container" style="width:800px;margin-top:20px;">
<form role="form">
<div class="form-group">
<label for="id">Patient ID: <input type="email" class="form-control" id="email"></label>
</div>
<div class="form-group">
<label for="pname"> Patient Name :
<input type="text" class="form-control" id="pname"> </label>
</div>
<div class="radio"> <label for="pgender" > Gender : </label>
<label><input type="radio" name="optradio1">Male</label>
<label><input type="radio" name="optradio1">Female</label>
</div>
<br/>
<div class="form-group">
<label for="pAge"> Patient Age :
<input type="text" class="form-control" id="page"> </label>
</div>
<div class="radio"> <label for="psmoking" > Smoking Status : </label>
<label><input type="radio" name="optradio2"> Yes </label>
<label><input type="radio" name="optradio2"> No </label>
</div>
<br/>
<div class="radio"> <label for="psmoking" > Ethnicity : </label>
<label><input type="radio" name="optradio3"> White </label>
<label><input type="radio" name="optradio3"> African American </label>
<label><input type="radio" name="optradio3"> Hispanic </label>
<label><input type="radio" name="optradio3"> Asian/Pacific Islander </label>
<label><input type="radio" name="optradio3"> Other </label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Glottic</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Subglottic</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Supraglottic</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Transglottic</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
<script>
</script>
</html>