使用纯CSS创建向上和向下箭头图标或按钮
使用纯CSS创建向上和向下箭头图标或按钮
提问于 2014-06-10 23:44:52
我试图创建下面显示的“向上和向下”控制按钮使用纯CSS，没有背景图像。
但是当我在"li.className:after or li.className:before“中添加箭头的CSS时，主框的位置发生了变化。
这里的是我得到的问题的答案>
下面是相同的代码：
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;
}如果你需要任何其他信息，请告诉我。
请提个建议。
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-06-11 01:22:25
如果将伪设置为display:inline-block (或除inline以外的任何其他值)。你可以调整大小。
然后,
- 将其居中：
text-align:centeron parent。 - to
vertical-alignit：line-height:20px(25px -5px是伪元素高度的一半)，并将：vertical-align:middle设置为伪元素：
<代码>G210
.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;
}Stack Overflow用户
发布于 2014-06-11 00:15:24
此选项始终将箭头居中，而不考虑大小，并且不需要固定的值边距
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;
}Stack Overflow用户
发布于 2014-06-10 23:46:25
添加
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/
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24145324
复制相关文章
相似问题
腾讯云开发者
