html - CSS 内联 block 板对齐

Question

我正在尝试使用 CSS 构建一个数独风格的棋盘，但在对齐一些方 block 时遇到了一些问题。我错过了什么？？

CODEPEN

HTML

<div class="middle-box">
  <div class="sudoku">
    <div class="square">
      <input class="tile normal edge-left edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
    </div>

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #ecf0f1;
background-size: cover;
font-family: "Slabo 27px", serif; }

a {
  text-decoration: none;
  transition: all 0.3s; }

.sudoku {
  width: 460px;
  height: 460px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0; }
 ....

Answer 1

由于您的输入是行内 block 元素，浏览器也尊重它们之间的空白，并且由于它们也占用一些空间，当输入不再适合行时，您会得到观察到的结果。

最简单的修复方法是在包装器容器上设置font-size: 0，这样空白就有效地变成了 0 宽度。这不会影响输入字体大小设置:

.sudoku {
  /* ... */
  font-size: 0;
}

演示:http://codepen.io/anon/pen/xbwBvG