使用纯CSS创建向上和向下箭头图标或按钮

Question

我正在尝试使用纯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: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

如果您需要任何其他信息,请与我们联系.

请建议.

Answer 1

如果将pseudo设置为display:inline-block(或任何其他值,但内联.),您可以调整它的大小.

然后,

1. 以中心为中心:text-align:center在父母身上.
2. 到vertical-align它:line-height:20px(25像素-5px至极是伪元件的高度的一半),并设置:vertical-align:middle以伪元素:

DEMO

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align:top;/* UPDATE*/
}
.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;
    text-align:center;/* UPDATE*/
    line-height:20px;/* UPDATE*/
}
.positionCameras li.cameraLeft:before {
    content:"";
    display:inline-block;/* UPDATE*/
    width: 0;
    height: 0;
    vertical-align:middle;/* UPDATE*/
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}