我正在尝试使用纯 CSS 且无背景图像创建如下所示的“向上和向下”控制按钮。
但是当我在“中添加箭头的CSS时li.className:after
or li.className:before
” 主盒子的位置移动了。
这是我遇到的问题的小提琴> http://jsfiddle.net/8usFk/ 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;
}
如果您需要任何其他信息,请告诉我。
请建议。
如果将伪设置为display:inline-block
(或除内联之外的任何其他值。)您可以调整它的大小。
Then,
- 将其居中:
text-align:center
在父母身上。
- To
vertical-align
it : line-height:20px
(25px -5px 是伪元素高度的一半)并设置:vertical-align:middle
到伪元素:
DEMO http://jsfiddle.net/8usFk/20/
.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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)