Html 复选框内联线在单独的行上渲染

Html 复选框内联线在单独的行上渲染,html,css,Html,Css,我是css新手,我的复选框存在渲染问题。我的复选框显示在文本其余部分的单独一行上。我希望复选框与文本的其余部分显示在同一行 指向完整CSS和HTML代码的链接: HTML输出: <div class="form-block"> <p>Enter Values</p> <br> <p>Enter More Values</p> <br/> <input type="hid

我是css新手,我的复选框存在渲染问题。我的复选框显示在文本其余部分的单独一行上。我希望复选框与文本的其余部分显示在同一行

指向完整CSS和HTML代码的链接:

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新手,因此如果您需要更清晰的信息或代码,请告诉我。

您似乎缺少表标记。当我向JSFIDLE添加开始和结束表标记时,表的加载与预期完全一致


当HTML不能正确呈现时,最好使用一个好工具。它将显示标记中可能存在的错误。

请发布完整的HTML代码。我看到了,但没有看到任何与相关的。抱歉,添加了完整的HTML代码。仍然显示在同一行中。。你在用什么浏览器?@Josh C,如果我删除
.form block label{display:block;}
,行不会像它们应该的那样分开。它变成了一个巨大的行,类似于一个长句(因为我有多个复选框和标签)。我将提供额外的HTML输出,向您展示我所说的不分隔行的含义。您是对的。我在这里发布了完整的CSS和HTML:希望有帮助。是的,这就是缺少表标记的那个。第7行有一个
标记,但没有打开的
标记。
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;
}