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

Posted

技术标签:

【中文标题】使用纯 CSS 创建向上和向下箭头图标或按钮【英文标题】：Create Up and Down arrow icons or buttons using pure 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;

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

请提出建议。

【问题讨论】：

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

希望对你有帮助！！！

【讨论】：

谢谢！我添加了“垂直对齐：顶部；”到 标签，现在所有的框都对齐了...但是箭头仍然在底部 为箭头添加边距。让我试试这个并发布代码。 查看答案的更新部分。这也应该解决图像居中问题！

以上是关于使用纯 CSS 创建向上和向下箭头图标或按钮的主要内容，如果未能解决你的问题，请参考以下文章

WPF - 使用标准按钮创建带有向上和向下箭头的按钮

如何在 iOS 7 中创建向上和向下箭头

css 向左向下箭头

如何在 Angular 9 中使用向上、向下、向左和向右箭头键导航动态输入和选择表内的字段？

如何设置x和y移动动画片段的最大/限制？

Chrome 32 更新中缺少向上/向下滚动条箭头按钮