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