我正在尝试使表单响应。 这是表单页面的链接 http://newdev.web-dorado.info/sahakj25/index.php/form 除了包含两个复选框的 div 之外，一切正常。 如果 div 的大小设置为 150px，则在调整页面大小时它不会向下移动，但是如果我将大小增加到 151px，它就可以正常工作。任何人都可以解释这可能是什么原因吗？
这是 JSFiddle 示例:http://jsfiddle.net/PcscG/
我试图向左浮动的 div 在第 18 行。
<div wdid="2" class="wdform_row">
<div type="type_checkbox" class="wdform_field">
<div class="wdform-label-section" style="float:left; width: 150px;"><span class="wdform-label">Checkbox:</span></div>
<div class="wdform-element-section " style="float:left;">
<div style="display: table;">
<div style="display: table-row-group;">
<div style="display: table-row-group;">
<div style="display: table-row;">
<div valign="top" idi="0" style="display: table-cell;">
<label id="2_label_element0" class="wdform-ch-rad-label" for="2_element130">option 1</label>
<input type="checkbox" id="2_element130" name="2_element130" value="option 1">
</div>
</div>
<div style="display: table-row;">
<div valign="top" idi="1" style="display: table-cell;">
<label id="2_label_element1" class="wdform-ch-rad-label" for="2_element131">option 2</label>
<input type="checkbox" id="2_element131" name="2_element131" value="option 2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
您需要为第 18 行的 div 指定一个宽度。看起来该 div 的宽度不够大，因此在您调整它的大小时不需要换行到下一行。如果您在调整“街道地址”文本框落到下一行的页面大小后仔细观察，该文本框的宽度大于第 16 行的 div 的宽度。由于包含选项的 div 是一个内联- block ，宽度仅为其中元素的大小，并且这些元素的宽度小于“街道地址”文本框，它不会换行。
这是我给那个 div 一个宽度的例子:http://jsfiddle.net/Gnax5/
<div class="wdform-element-section " style="float:left;border:1px solid blue; width:200px;">
但是如果您的选项标签更长，则您不需要这样做。例如，这是一个没有宽度的 div 的 fiddle ，但用更长的字符串替换了“option1”和“option2”:http://jsfiddle.net/sC4dC/
关于forms - 向左浮动不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18466523/