Question

我的文字旁边的三角形垂直对齐顶部，而不是与文本处于同一级别。

看起来像，

Plunker代码为here。

我的三角形css是，

.arrow-down {
   width: 0; 
   height: 0; 
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #000;   
 }

注意：或者，我尝试使用unicode \25BC显示三角形，但它没有出现。

<span class="triangle"></span>

 .triangle{
   display: inline-block;
   width: 20px;
   height: 20px;
   content : '\25BC';
 }

Answer 1

为display: inline-block;设置.arrow-down将通过允许内联元素采用定义的高度和宽度来解决问题：

＆＃13;

/* Styles go here */

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  Level One Menu
  <span class="arrow-down"></span>
</body>

</html>

＆＃13;

请注意

它不起作用，因为content只有伪元素:before和:after

＆＃13;

.triangle:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '\25BC';
}

＆＃13;

<span class="triangle"></span>

＆＃13;

Answer 2

只需将display: inline-block;添加到您的箭头样式。

使用css边框绘制的三角形显示在文本的顶部

2 个答案: