Question

正如你在上面的图片中看到的那样，div方块的最后一行略微不对齐，它让我疯狂地说它为什么会发生。

JSFiddle链接：https://jsfiddle.net/ue936Lnn/

（HTML已被缩短以节省数百行相同的内容。）

HTML

<body>        
    <div id="main_container">            
        <div id="content_container">
            <div id="square_container">
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <br>
                <div class="tone_square"></div>
                ...

                <div class="tone_square"></div>
                <br>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
                <div class="tone_square"></div>
            </div>
        </div>
    </div>
    </body>

CSS

body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #15181A;
}

#content_container {
    height: 100%;
    width: 100%;

    margin: 0 auto;
}

.tone_square {
    height: 25px;
    width: 25px;
    background-color: white;

    display: inline-block;
    padding: 5px;
}

#square_container {
    text-align: center;
    margin-top: 100px;
}

Answer 1

这是你jsfiddle的分叉版本，问题解决了： https://jsfiddle.net/vivmaha/caq07de2/

每当您使用inline元素时，您必须注意隐藏的字体效果（因为inline是基于文本的）。您可以通过避免内联非文本元素或通过设置font-size:0来消除字体效果来解决此问题。

在您的情况下，我在font-size:0;上设置了#square_container，问题就消失了。

（我还必须将margin:2px;添加到.tone_square以计算丢失的字体间距。

div网格的最后一行略微不对齐

1 个答案: