<style>
#stitched {
padding: 20px;
margin: 10px;
background: grey;
width: 300px;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px grey, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px grey;
font-weight: normal;
}
</style><body>
<td class="thead"><span class="smalltext"><strong>Player Control Panel</strong></span></td>
<tr>
<td class="trow1">
<h1 style="font-size: 35px; text-align: center;">Player Control Panel</h1>
<div id="stitched">
<i class="fa fa-plus fa-5x" style="text-align: center;"></i>
<h2 style="text-align: center;">Create your new character account</h2>
</div>
<div id="stitched">
<i class="fa fa-trash-o fa-5x" style="text-align: center;"></i>
<h2 style="text-align: center;">Delete your existing character account</h2>
</div>
</td>以上是我的代码。当您运行该代码片段时，如果您得到的话，这些框往往会一个一个地出现在彼此下方。你如何做到让盒子留在一个区域而不是下降？喜欢http://i.imgur.com/8O6HwmX.png .我试图在 MyBB 环境中实现我的目标(带有论坛自己的默认未编辑类和内容的自定义页面)。我试过弄乱宽度和位置，但无济于事。谢谢。如果此信息有任何帮助，我也在使用 Font Awesome。
最佳答案
如果您将 display: inline-block; 添加到您的 div 的 css，它就可以工作。
这使得元素显示在一行中，并尊重元素的大小。
所以只是 display: inline; 不起作用，它使 div 的大小变得疯狂，如下所示。
但是你不应该给两个元素相同的id。该值在文档中应该是唯一的。您可以将其替换为类名。
关于html - 防止div框自动间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31609284/