html - CSS 中的导航（右、左、上、下箭头）

Question

我目前在 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;
}

有人可以帮忙吗？谢谢

标签： htmlcss

Answer 1

.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;
}