【问题标题】：Create Up and Down arrow icons or buttons using pure CSS使用纯 CSS 创建向上和向下箭头图标或按钮
【发布时间】：2014-07-31 11:19:20
【问题描述】：

我正在尝试使用纯 CSS 和无背景图像创建下面显示的“向上和向下”控制按钮。

但是当我在“li.className:after 或 li.className:before”中添加箭头的 CSS 时，主框的位置移动了。

这是我遇到的问题的 Fiddle > 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;
}

如果您需要任何其他信息，请告诉我。

请提出建议。

【问题讨论】：

您可以考虑使用一些字符代码来代替箭头 - 请参阅：stackoverflow.com/questions/2701192/…
有点小技巧，但在.positionCameras li.cameraLeft:before 中设置position: fixed; left: 21px; top: 21px; 可以解决这个问题。

标签： html css css-shapes arrow-keys

【解决方案1】：

DEMO

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;
    vertical-align:top;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    padding:5px;
    color:#007bff;
    font-size:16px;
    line-height:25px;
}
.positionCameras li.cameraLeft:before{
    content:"▼";
}
.positionCameras li.cameraRight:before{
    content:"▲";
}
.positionCameras li.cameraIcon:before{
    content:"•";
    padding:5px;
    color:#111;
    font-size:48px;
    line-height:25px;
}

【讨论】：

酷三角字符！跨不同浏览器或语言环境的任何渲染问题？
@Peter 浏览器可以很好地处理它们。您只需要确保用于呈现它们的字体包含字符。这些是非常通用的符号并且存在于大多数字体中。微软推荐 Segroe UI。

【解决方案2】：

这是我严格的 html 版本。您将需要添加 javascript 函数“incrementMyNumber()”来处理 onclick 事件。关键是包含箭头的 div 的负边距。您可能需要使用数字，但这在 IE 和 Chrome 中看起来不错。

<table>
<td>
    <input type="text" id="myNumber" style="width:50px" value="5" />
</td>
<td>
    <table style="border-spacing:0px;margin-left:-2px;width:20px;">
        <tr>
            <td style="border:1px solid black;height:8px;background-color:#dcdcdc;cursor:pointer" onclick="incrementMyNumber(1)">
                <div style="margin:-5px;font-size:8px;">&#x25B2;</div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid black; height: 8px; background-color: #dcdcdc;cursor:pointer" onclick="incrementMyNumber(-1)">
                <div style="margin:-5px;font-size:8px;">&#x25BC;</div>
            </td>
        </tr>
    </table>
</td>

【讨论】：

【解决方案3】：

如果您将 pseudo 设置为 display:inline-block（或除内联之外的任何其他值。）您可以调整其大小。

那么，

将其居中：text-align:center 在父级上。
到vertical-align 它：line-height:20px（25px -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;
}

【讨论】：

【解决方案4】：

无论大小如何，此选项始终使箭头居中，并且不需要固定值边距

JSfiddle Demo

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* added */

}
.positionCameras li.cameraLeft, 
.positionCameras li.cameraIcon, 
.positionCameras li.cameraRight {
    position: relative; /* added */
    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.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    content:""; 

    /* added for positioning magic */
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);    
    transform: translate(-50%, -50%);  
    /* end added */

    width: 0;
    height: 0;
    border-style: solid;
}

.positionCameras li.cameraLeft:before {
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}

.positionCameras li.cameraRight:before {
    border-width: 10px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

【讨论】：

【解决方案5】：

您也可以使用html character codes 并按照Fiddle 中的方式执行此操作

【讨论】：

【解决方案6】：

添加

vertical-align:top;

应用到 div 上的 CSS。

即。你的 CSS 类应该是这样的：

.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;
    vertical-align:top;
}

这样就可以了。

你可以在这里看到：http://jsfiddle.net/rhX87/

更新

添加以下 CSS 以使图像正确居中：

position:relative;
bottom:11px;
left:7px;

在.positionCameras li.cameraLeft:before 类中。

这应该使图像居中。

在此处查看：http://jsfiddle.net/rhX87/1/

希望对你有帮助！！！

【讨论】：

谢谢！我添加了“垂直对齐：顶部；”到
标签，现在所有的框都对齐了...但是箭头仍然在底部

为箭头添加边距。让我试试这个并发布代码。

查看答案的更新部分。这也应该解决图像居中问题！