相关疑难解决方法(0)

我正在尝试使用纯CSS和没有背景图像创建下面显示的"向上和向下"控制按钮.

但当我在" li.className:after或li.className:before"中添加了箭头的CSS时,主框的位置移动了.

这是我得到的问题的小提琴> http://jsfiddle.net/8usFk/

以下是相同的代码:

HTML

<div class="positionCameras">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}
.positionCameras li.cameraLeft:before {
    content:" ";
    width: 0;
    height: …