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。它会向您显示标记中可能存在的错误。

复选框在单独的行上内联呈现

1 个答案: