html - 复选框在单独的行上内联渲染

Question

我是 css 的新手，我的复选框有渲染问题。我的复选框出现在我其余文本的单独行上。我希望复选框与文本的其余部分出现在同一行。

完整 CSS 和 HTML 代码的链接:http://jsfiddle.net/xmYLG/4/

HTML 输出:

<div class="form-block">
    <p>Enter Values</p>
    <br>
    <p>Enter More Values</p>   
    <br/>
<input type="hidden" name="indicator_set-TOTAL_FORMS" value="6" id="id_indicator_set- TOTAL_FORMS" /><input type="hidden" name="indicator_set-INITIAL_FORMS" value="3"  id="id_indicator_set-INITIAL_FORMS" /><input type="hidden" name="indicator_set-MAX_NUM_FORMS"  id="id_indicator_set-MAX_NUM_FORMS" />
 <tr><th><label for="id_indicator_set-0-indicator">Indicator:</label></th><td><input id="id_indicator_set-0-indicator" type="text" name="indicator_set-0-indicator" value="Length" maxlength="255" /></td></tr>
 <tr><th><label for="id_indicator_set-0-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-0-DELETE" id="id_indicator_set-0-DELETE" /><input type="hidden" name="indicator_set-0-relevantdisease" value="1" id="id_indicator_set-0-relevantdisease" /><input type="hidden" name="indicator_set-0-id" value="1"  id="id_indicator_set-0-id" /></td></tr> <tr><th><label for="id_indicator_set-1-indicator">Indicator:</label></th><td><input id="id_indicator_set-1-indicator" type="text" name="indicator_set-1-indicator" value="Fungus" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-1-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-1-DELETE" id="id_indicator_set-1-DELETE" /><input type="hidden" name="indicator_set-1-relevantdisease" value="1" id="id_indicator_set-1-relevantdisease" /><input type="hidden" name="indicator_set-1-id" value="2" id="id_indicator_set-1-id" /></td></tr> <tr><th><label for="id_indicator_set-2-indicator">Indicator:</label></th><td><input id="id_indicator_set-2-indicator" type="text" name="indicator_set-2-indicator" value="Gender" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-2-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-2-DELETE" id="id_indicator_set-2-DELETE" /><input type="hidden" name="indicator_set-2-relevantdisease" value="1" id="id_indicator_set-2-relevantdisease" /><input type="hidden" name="indicator_set-2-id" value="41" id="id_indicator_set-2-id" /></td></tr> <tr><th><label for="id_indicator_set-3-indicator">Indicator:</label></th><td><input id="id_indicator_set-3-indicator" type="text" name="indicator_set-3-indicator" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-3-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-3-DELETE" id="id_indicator_set-3-DELETE" /><input type="hidden" name="indicator_set-3-relevantdisease" value="1" id="id_indicator_set-3-relevantdisease" /><input type="hidden" name="indicator_set-3-id" id="id_indicator_set-3-id" /></td></tr> 
<tr><th><label for="id_indicator_set-4-indicator">Indicator:</label></th><td><input id="id_indicator_set-4-indicator" type="text" name="indicator_set-4-indicator" maxlength="255" /></td></tr><tr><th><label for="id_indicator_set-4-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-4-DELETE" id="id_indicator_set-4-DELETE" /><input type="hidden" name="indicator_set-4-relevantdisease" value="1" id="id_indicator_set-4-relevantdisease" /><input type="hidden" name="indicator_set-4-id" id="id_indicator_set-4-id" /></td></tr> <tr><th><label for="id_indicator_set-5-indicator">Indicator:</label></th><td><input id="id_indicator_set-5-indicator" type="text" name="indicator_set-5-indicator" maxlength="255" /></td></tr>
<tr><th><label for="id_indicator_set-5-DELETE">Delete:</label></th><td><input type="checkbox" name="indicator_set-5-DELETE" id="id_indicator_set-5-DELETE" /><input type="hidden" name="indicator_set-5-relevantdisease" value="1" id="id_indicator_set-5-relevantdisease" /><input type="hidden" name="indicator_set-5-id" id="id_indicator_set-5-id" /></td></tr>     

CSS:

form {}
label, input[type=button], input[type=submit], button {cursor:pointer;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom;*vertical-align:baseline;}


input[type="checkbox"] {
  display: inline;


.form-block label {
  display: block;
  margin-bottom: 5px;
  margin-left: 5px;
  color: #333;
}
.form-block .blocklet {
  padding-right: 30px;
}
.form-block .subquestion {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid #ccc;
}
.form-block .subquestion,
.form-block .subquestion label {
  font-size: 13px;
}

我是 CSS 的新手，所以如果您需要更清晰的说明或代码，请告诉我。

Answer 1

您似乎缺少表格标签。当我向您的 JSFiddle 添加开始和结束表格标签时，表格完全按预期加载，

当 HTML 无法正确呈现时，一个很好的工具是 http://validator.w3.org .它会向您显示标记中可能存在的错误。