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

Question

给出的例子可能比需要的大一点，但我无法弄清问题出在哪儿，所以我发布了它。您只需查看label#problematic及其周围（JSFiddle中的行号9）。

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

I had worked out this example（借助一些SO community）在合并复杂内容之前进行布局。它在这个例子中完美地工作。但它在我的代码中表现怪异。

Here is the JSFiddle.

CODE： -

<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的包裹你的表格行/细胞。有divs包装你的第二和第三行，导致他们被视为好像他们都在第一列。

查看下面的提琴工作布局示例。注意：我删除了很多你的divs。您的表格结构必须是table：table-row：table-cell没有其他div包装行或单元格。删除多余的div恢复了正确的布局。

JSFiddle