使用css边框绘制的三角形显示在文本的顶部(Triangle drawn using css borders appears on the top of the text)

编程入门行业动态更新时间:2024-10-24 22:27:27

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

看起来像，

Plunker代码在这里。

我的三角形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'; }

Triangle next to my text is vertically aligned towards the top instead of being in same level as the text.

It looks like,

Plunker code is here.

My css for triangle is,

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

Note: Alternatively, i tried to display a triangle using the unicode \25BC but it didn't appear.

<span class="triangle"></span> .triangle{ display: inline-block; width: 20px; height: 20px; content : '\25BC'; }

最满意答案

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

/* 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;
} 
  <!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> 
  
 
 
 注意解释  
 它不起作用，因为content只有伪元素:before和:after  
 
 
  
  .triangle:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '\25BC';
} 
  <span class="triangle"></span> 
  
 
Setting display: inline-block; for .arrow-down will fix issue by allowing inline element to take defined height and width: 
 
 
  
  /* 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;
} 
  <!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> 
  
 
 
Note explained 
It does not work because content has only pseudo-elements :before and :after 
 
 
  
  .triangle:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '\25BC';
} 
  <span class="triangle"></span>