首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用纯CSS创建向上和向下箭头图标或按钮

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

Stack Overflow用户
提问于 2014-06-10 23:44:52
回答 6查看 15.7K关注 0票数 5

我试图创建下面显示的“向上和向下”控制按钮使用纯CSS,没有背景图像。

但是当我在"li.className:after or li.className:before“中添加箭头的CSS时,主框的位置发生了变化。

这里的是我得到的问题的答案>

下面是相同的代码:

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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;
}

如果你需要任何其他信息,请告诉我。

请提个建议。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-06-11 01:22:25

如果将伪设置为display:inline-block (或除inline以外的任何其他值)。你可以调整大小。

然后,

  1. 将其居中:text-align:center on parent。
  2. to vertical-align it:line-height:20px (25px -5px是伪元素高度的一半),并将:vertical-align:middle设置为伪元素:

<代码>G210

代码语言:javascript
复制
.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;
}
票数 5
EN

Stack Overflow用户

发布于 2014-06-11 00:15:24

此选项始终将箭头居中,而不考虑大小,并且不需要固定的值边距

CSS

代码语言:javascript
复制
.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;
}
票数 3
EN

Stack Overflow用户

发布于 2014-06-10 23:46:25

添加

代码语言:javascript
复制
vertical-align:top;

添加到div上应用的CSS。

即。CSS类应该是这样的:

代码语言:javascript
复制
.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以使图像正确居中:

代码语言:javascript
复制
position:relative;
bottom:11px;
left:7px;

.positionCameras li.cameraLeft:before类中。

这应该是你想要的居中图像。

点击这里查看:http://jsfiddle.net/rhX87/1/

希望这能有所帮助!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24145324

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档