使用css邊框繪製的三角形出現在文本頂部

我的文本旁邊的三角形垂直對齊頂部，而不是與文本位於同一水平。使用css邊框繪製的三角形出現在文本頂部

它看起來像，

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

來源

2016-04-18 Madhavan Kumar

設置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>

來源

2016-04-18 07:55:59 Justinas

非常感謝，Justinas ... –

只需添加display: inline-block;到您的箭頭的風格。

來源

2016-04-18 07:58:23

使用css邊框繪製的三角形出現在文本頂部

回答

相關問題