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

注：代わりに、私はユニコード\25BCを使用して三角形を表示しようとしたが、それは表示されませんでした。

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

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

出典

2016-04-18 Madhavan Kumar

.arrow-downためdisplay: inline-block;を設定すると、インライン要素が定義された高さと幅を取るできるようにすることで、問題を修正します：

/* 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境界を使用して描かれた三角形は、テキストの上部に表示されます

答えて

関連する問題