我目前在div中具有导航工具,如下所示:
更新:经过一番努力,我现在有了这样的控件;
我需要实现的如下(请忽略背景颜色,但需要将div作为圆包含在图像中):
我的HTML代码如下:
<div class="mapPanTools">
<div style="display: block" id="panUp"></div>
<div style="display: block" id="panDown"></div>
<div style="display: inline" id="panLeft"></div>
<div style="display: inline" id="panRight"></div>
</div>
更新:我编辑的CSS代码
.mapPanTools {
position: absolute;
z-index: 10;
margin-top: 22%;
left: 14px;
padding: 0px 0px !important;
border-radius: 50%;
}
.blockDisplay {
display: block;
}
#panDown {
background-image: url(iconUrl);
width: 16px;
height: 16px;
}
#panUp {
background-image: url(iconUrl);
width: 16px;
height: 16px;
}
#panRight {
background-image: url(iconUrl);
width: 16px;
height: 16px;
}
#panLeft {
background-image: url(iconUrl);
width: 16px;
height: 16px;
}
有人可以帮忙吗?谢谢
答案 0 :(得分:0)
.mapPanTools {
position: absolute;
z-index: 10;
margin-top: 22%;
left: 14px;
padding: 0px 0px !important;
border-radius: 50%;
width: 64px;
height: 64px;
}
.blockDisplay {
display: block;
}
#panUp, #panRight, #panDown, #panRight {
display: block;
position: absolute
}
#panDown {
background-image: url(iconUrl);
width: 16px;
height: 16px;
bottom: 0;
}
#panUp {
background-image: url(iconUrl);
width: 16px;
height: 16px;
top: 0;
}
#panRight {
background-image: url(iconUrl);
width: 16px;
height: 16px;
right: 0;
}
#panLeft {
background-image: url(iconUrl);
width: 16px;
height: 16px;
left: 0;
}