HTMLのインラインブロックはまっすぐではありませんか？

私は私のhtmlで3つのインライン・ブロックがあります。HTMLのインラインブロックはまっすぐではありませんか？

<div class="top"> 

    <div class="inline color2 player1 polygon"> 
     <div class="title">KDZaster</div> 
    </div> 

    <div class="inline color1 round polygon"> 
     <div class="title">Grand Finals</div> 
    </div> 

    <div class="inline color2 player2 polygon"> 
     <div class="title">DarthArma</div> 
    </div> 

</div>

すべての3ブロックがdisplay: inline-block設定されているが、それらはすべて同じ行の高さを持っています。ただし、中間ブロックのフォントサイズは小さくなります。この小さなフォントサイズのため、ブロック自体は他のブロックの下に設定されているようです。

https://jsfiddle.net/7jvtog6d/

ですが、なぜでしょう：私はjsfiddleが含まれていますか？簡単な修正はありますか？

出典

2016-08-20 Jason Axelrod

'垂直整列を使用してください：あなたの' '.inlineクラス –

ためtop' https://jsfiddle.net/7jvtog6d/1/は、あなたが探しているものである。このために？私は、 'vertical-align：bottom'をインラインクラス – user3080953

に追加しました。垂直方向のアライメントを追加すると、まだ1pxオフになっています。 –

vertical-align:topを使用してインラインブロックの要素をCSSに垂直に配置すると、問題なく動作します。

これをチェックしてフィードバックをお送りください。ありがとう！

.top > div.polygon { 
    display: inline-block; 
    vertical-align: top; 
}

:root { 
 
    --main-color1: rgba(255, 000, 000, 0.5); 
 
    --main-color2: rgba(000, 255, 255, 0.5); 
 
    --main-color3: rgba(255, 255, 255, 0.5); 
 
    --main-height: 40px; 
 
    --main-gutter: -10px; 
 
    --main-padding: 10px; 
 
    --font-family: 'Franklin Gothic'; 
 
    --font-color: #FFFFFF; 
 
    --font-large: 30px; 
 
    --font-small: 14px; 
 
    --font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000; 
 
    --arrow-width: 15px; 
 
    --round-width: 150px; 
 
    --player-width: 200px; 
 
    --score-width: 40px; 
 
    --out-speed: 0.5s; 
 
    --in-speed: 5s; 
 
} 
 
body { 
 
    color: var(--font-color); 
 
    font-family: var(--font-family); 
 
    font-size: var(--font-large); 
 
    text-shadow: var(--font-shadow); 
 
    line-height: var(--main-height); 
 
    margin: 10px 0; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
.slow { 
 
    transition: all var(--in-speed) ease; 
 
} 
 
.fast { 
 
    transition: all var(--out-speed) linear; 
 
} 
 
.inline { 
 
    display: inline-block; 
 
    margin: 0 -8px; 
 
} 
 
.color1 { 
 
    background-color: var(--main-color1); 
 
} 
 
.color2 { 
 
    background-color: var(--main-color2); 
 
} 
 
.color3 { 
 
    background-color: var(--main-color3); 
 
} 
 
.round { 
 
    font-size: var(--font-small); 
 
    text-transform: uppercase; 
 
    width: var(--round-width); 
 
} 
 
.round.polygon { 
 
    -webkit-clip-path: polygon(0 calc(var(--main-height)/2), var(--arrow-width) 0, calc(var(--round-width) - var(--arrow-width)) 0, var(--round-width) calc(var(--main-height)/2), calc(var(--round-width) - var(--arrow-width)) var(--main-height), var(--arrow-width) var(--main-height)); 
 
} 
 
.player1, 
 
.player2 { 
 
    width: var(--player-width); 
 
} 
 
.player1 .title { 
 
    text-align: right; 
 
    padding: 0 20px; 
 
} 
 
.player2 .title { 
 
    text-align: left; 
 
    padding: 0 20px; 
 
} 
 
.player1.polygon, 
 
.player2.polygon { 
 
    -webkit-clip-path: polygon(var(--arrow-width) calc(var(--main-height)/2), 0 0, var(--player-width) 0, calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height)/2), var(--player-width) var(--main-height), 0 var(--main-height)); 
 
} 
 
.top > div.polygon { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
}

<body> 
 

 
    <div class="top"> 
 

 
    <div class="inline color2 player1 polygon"> 
 
     <div class="title">KDZaster</div> 
 
    </div> 
 

 
    <div class="inline color1 round polygon"> 
 
     <div class="title">Grand Finals</div> 
 
    </div> 
 

 
    <div class="inline color2 player2 polygon"> 
 
     <div class="title">DarthArma</div> 
 
    </div> 
 

 
    </div> 
 

 
</body>

出典

2016-08-20 06:13:28 kukkuz

ありがとう！それは私のモニター上で黒い背景と色のシフトのために見えました。しかし、スクリーンショットを撮ってズームインすると完璧だった。 –

お役立ち情報ありがとうございました:)あなたは大歓迎です！ – kukkuz

HTMLのインラインブロックはまっすぐではありませんか？

答えて

関連する問題