Html CSS：为什么这个标签会占用所有的可用空间

给出的示例可能比要求的要大一些，但我无法在几个小时内找出问题所在，因此我将其发布。您只需查看

标签及其周围（JSFiddle中的第9行）

它的问题是它占用了相邻的
标签
留下的所有空间。问题是为什么？怎么办？

（在一些人的帮助下）在合并复杂内容之前进行布局。它在示例中非常有效。但在我的代码中，它的行为很奇怪


代码：-

<form action="http://localhost/moodle/mod/quiz/processattempt.php" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="responseform">
    <div>
        <!-- ------------------------------------------------- -->

        <div style="display:table;">
            <div style="display:table-row; background-color:#e8c277;">
                <label id="problematic" style="display:table-cell; padding:10px; border-width:1px;border-color:blue;border-style:solid;">True</label>
                <label style="display:table-cell; padding:10px;border-width:1px;border-color:red;border-style:solid;"><span style="white-space:nowrap;">False</span></label>
                <span style="display:table-cell;"></span>
            </div>
        <!-- ------------------------------------------------- -->
        <div class="que multichoice deferredfeedback notyetanswered" id="q13">
            <div>
                <div class="formulation">
                    <h4 class="accesshide">Question text</h4>
                    <input type="hidden" name="q36:13_:sequencecheck" value="1" />
                    <div class="ablock" style="display:table-row;">
                        <span style="display:table-cell; text-align:center;">
                            <input type="radio" name="q36:13_answer" value="0" id="q36:13_answer0" /> 
                        </span>
                        <span style="display:table-cell; text-align:center;">
                            <input type="radio" name="q36:13_answer" value="1" id="q36:13_answer1" /> 
                        </span>
                        <label class="qtext" style="display:table-cell;">No individual country produces more than one-fourth of the world's sugar.
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="que multichoice deferredfeedback notyetanswered" id="q14">
            <div>
                <div class="formulation">
                    <h4 class="accesshide">Question text</h4>
                    <input type="hidden" name="q36:14_:sequencecheck" value="1" />
                    <div class="ablock" style="display:table-row;">
                        <span style="display:table-cell; text-align:center;">
                            <input type="radio" name="q36:14_answer" value="0" id="q36:14_answer0" /> 
                        </span>
                        <span style="display:table-cell; text-align:center;">
                            <input type="radio" name="q36:14_answer" value="1" id="q36:14_answer1" /> 
                        </span>
                        <label class="qtext" style="display:table-cell;">If Brazil produces less than 20% of the world's supply of any commodity listed in the table, Brazil is not the world's top exporter of than commodity.
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!-- ------------------------------------------------- -->
        </div>
        <!-- ------------------------------------------------- -->
        <div class="submitbtns">
            <input type="submit" name="next" value="Next" />
        </div>
    </div>
</form>


真的
假的
问题文本
没有哪个国家的糖产量超过世界的四分之一。
问题文本
如果巴西生产的任何商品都不到表中所列商品世界供应量的20%，那么巴西就不是世界上最大的商品出口国。
不能让div包装表行/单元格。第二行和第三行中都有div，导致它们被视为都在第一列中

请参见下面的提琴，了解工作布局的示例。注意：我删除了你的很多div。您的表结构必须是
表
：
表行
：
表单元格
，并且没有其他div包装行或单元格。删除多余的div恢复了正确的布局

这就是
表格单元格的工作方式
将
宽度：100%
添加到您的span中。在这种情况下，我也没有显式地设置另一个
标签和
span
的宽度，标签只是根据其内容隐式地获得
宽度，而
span
（因为它是空的）占用了剩余的空间。但是在这段代码中，为什么剩余的空间没有被
span
所占据呢？这会干扰它下面的元素。注意：我删除了很多div。您的表结构必须是
table
：
tr
：
td
，没有其他div包装行或单元格。删除包装div恢复了正确的布局。是的，您可以保留它们，但必须对布局进行重大更改。将
display:table行
放在第一个div（即
display:table
div的直接子级）上，并将
display:table单元格
放在其直接子级上。如果你现在就这样做，你将不会得到你所期望的布局；为了获得正确的表格布局，您必须重新排列它们。只需遵循一条简单的准则，即表只能有表行子级，表行只能有表单元格子级，表单元格子级可以有任何子级。