使用纯CSS创建向上和向下箭头图标或按钮 [英] Create Up and Down arrow icons or buttons using pure CSS

问题描述

我试图使用纯CSS创建下面显示的向上和向下控制按钮，并且没有背景图片。

但是当我在 li.className：在或 li.className之后：之前移动主箱子的位置。

以下是我正在收到的问题的小提琴> http ：//jsfiddle.net/8usFk/

以下是相同的代码：

HTML

 < div class =positionCameras> 
< ul> 
< li title =上移class =cameraLeftid =cameraUp>< / li> 
< li title =Cameraclass =cameraIcon>< / li> 
< li title =下移class =cameraRightid =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; 
光标：指针; 
背景：#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：透明透明＃007bff透明; 
} 
 .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透明透明透明; 
} 
  

让我知道您是否需要其他信息。

请建议。

解决方案

内嵌块（或任何其他值，但内联），您可以调整它。

然后，

1. 居中： text-align：center 在家长身上。


2. 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; 
光标：指针; 
背景：#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 {
内容：; 
 display：inline-block; / * UPDATE * / 
 width：0; 
 height：0; 
 vertical-align：middle; / * UPDATE * / 
 border-style：solid; 
 border-width：0 5px 10px 5px; 
 border-color：透明透明＃007bff透明; 
} 
 .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透明透明透明; 
} 
  

I am trying to create below shown "up and down" control buttons using pure CSS and no Background image.

But when I added the CSS for arrows in "li.className:after or li.className:before " the position of main boxes moved.

Here is the Fiddle for the issue I am getting > http://jsfiddle.net/8usFk/

Below is the Code for the same:

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;
}

Let me know if you need any other information.

Please suggest.

解决方案

If you set pseudo to display:inline-block (or any other values but inline.) you can size it.

Then,

1. to center it: text-align:center on parent.
2. To vertical-align it : line-height:20px (25px -5px wich is half of the height of pseudo element) and set : vertical-align:middle to pseudo element:

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;
}

这篇关于使用纯CSS创建向上和向下箭头图标或按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！