Question

给出的示例可能比要求的要大一些，但我无法在数小时内找出问题所在，所以我发布了它。您只需要查看label #problematic及其周围（ JSFiddle中的第9行）。

问题在于它占用了相邻label留下的所有空间。问题是为什么？怎么办呢？

I had worked out this example（在某些SO community的帮助下）在合并复杂内容之前进行布局。它在示例中完美运行。但它在我的代码中表现得很奇怪。

代码： -

<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>

Answer 1

你不能有div包装你的表行/单元格。有第二行和第三行包含div，导致它们被视为第一列中的所有行。

请参阅下面的小提琴，了解工作布局的示例。注意：我删除了很多你的div。您的表格结构必须为table：table-row：table-cell，其他div不包含行或单元格。删除多余的div可以恢复正确的布局。

JSFiddle

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

1 个答案: