Question

我有一个容器元素，宽度为560px，高度为80px。在容器内部，我有7个内嵌块元素，它们是80 x 80.（80宽80高）但由于某种原因，第7个内联块元素被切断了。（80 * 7 = 560）

import csv
with open("output.csv", "wb") as f:
    writer = csv.writer(f)
    writer.writerows([output])

tgt=set()
for i in range(1234,99999+1):
    s='{:05d}'.format(i)
    if len(set(s))==5:
        tgt.add(s)

Answer 1

内联元素包括标记中存在的额外空格，以及 g ， j ， p 等字母的下降高度， q ， y 。这个额外的空白区域使元素比您预期的要大。

虽然有are workarounds继续使用inline-block，但如果您不能使用flexbox，我建议您使用flexbox或浮动它们。

Flexbox解决方案

＆＃13;

* { 
  box-sizing: border-box;
}
#playerChoice {
  display: flex;
  width: 560px;
  height: 80px;
  border: 1px dashed indianred;
}

.choice {
  flex-grow: 1;
  border: 1px dashed #ccc;
}

＆＃13;

<div id="playerChoice">
  <div class="choice" id="choice1">1</div>
  <div class="choice" id="choice2">2</div>
  <div class="choice" id="choice3">3</div>
  <div class="choice" id="choice4">4</div>
  <div class="choice" id="choice5">5</div>
  <div class="choice" id="choice6">6</div>
  <div class="choice" id="choice7">7</div>
</div>

＆＃13;

为什么内联块元素在容器内不适合？

1 个答案: