Question

我的代码

<div id="open-toolkit">
     <span class="glyphicon glyphicon-briefcase" style="margin-right: 4px; font-size: 18px;"></span>
     <span class="glyphicon glyphicon-chevron-right" style="font-size: 12px">     </span>
</div>

这是我的JSFiddle https://jsfiddle.net/danielyaa5/m2q9aLoa/2/
我想向上移动右侧V形图标，但我似乎无法这样做，添加边缘顶部似乎将整行向下移动，与添加填充相同。

Answer 1

试试这个：

span{
    display:inline-block;
    vertical-align:middle;
}

https://jsfiddle.net/m2q9aLoa/8/

Answer 2

只需添加position: relative; top: -5px;或想要移动它的像素数。

Answer 3

如果您对open-toolkit div上的style="overflow: hidden"执行相同操作该怎么办？

Answer 4

https://jsfiddle.net/m2q9aLoa/6/

方法= 1

<div>
    <span id="open-toolkit" class="glyphicon glyphicon-briefcase" 
      style="margin-right: 4px; font-size: 18px;"></span>
    <span class="glyphicon glyphicon-chevron-right" 
      style="font-size: 18px;"></span>
</div>

方法= 2

<div>
    <span id="open-toolkit" class="glyphicon glyphicon-briefcase" 
       style="margin-right: 4px; font-size: 18px;"></span>
    <span class="glyphicon glyphicon-chevron-right"         
       style="font-size: 12px;top:-2px;position:relative"></span>
</div>

Answer 5

使用此CSS代码段。

#open-toolkit span:last-child {
  margin-top: -18px; /* Change the margin-top: .... as your requirement */
  vertical-align: middle;
}

见这里：https://jsfiddle.net/m2q9aLoa/7/

分别调整div中2个span元素的高度

5 个答案: