Question

我的html中有3个内联块：

<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，它们都具有相同的线高。但是，中间块的字体较小。由于这个较小的字体大小，块本身似乎设置在其他块下面。我加入了一个jsfiddle：

https://jsfiddle.net/7jvtog6d/

为什么会这样？有一个简单的解决方案吗？

Answer 1

使用CREATE DATABASE v_2_prod WITH OWNER = postgres ENCODING = 'UTF8' TABLESPACE = pg_default LC_COLLATE = 'C' LC_CTYPE = 'C' CONNECTION LIMIT = -1;将内联块元素垂直对齐到css，它会正常工作！

检查一下，让我知道您的反馈。谢谢！

vertical-align:top

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

HTML内联块不直？

1 个答案: