Question

我有以下HTML：

<li>
   <label for="RememberMe" class="checkbox remember-me">Remember me?</label>

   <input type="checkbox" value="true" name="RememberMe">
   <input type="hidden" value="false" name="RememberMe">
</li>

CSS的内容如下：

.form label, .form .label {
    display: block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

form input[type="radio"], form input[type="checkbox"] {
    margin-left: 0.5em;
    margin-top: 0.5em;
    padding: 0;
}

我的问题是“记住我”这个词出现在一行上复选框出现在它下面。

我怎样才能使复选框显示在“记住我”字样的左侧。我需要使用float：left还是使标签不显示：阻止？

更新

感谢所有建议。我无法真正为我的应用程序更改主CSS。我是否可以使用某些特定的CSS进行更改，例如：

label.remember-me {

}

input#RememberMe {

}

Answer 1

标签的显示属性应为inline-block。您可以阅读有关显示选项here的更多信息。

.form label, .form .label {
    display: inline-block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

演示：Fiddle

更新

.form label.remember-me{
    display: inline-block;
}

演示：Fiddle

Answer 2

你在Display:Block css中使用label就是问题删除它，它将工作。

左侧的复选框。

<li>   
<input type="checkbox" value="true" name="RememberMe"/>
<label for="RememberMe" class="checkbox remember-me">Remember me?</label>
<input type="hidden" value="false" name="RememberMe"/>
</li>

请参阅fiddle

Answer 3

.form label, .form .label {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

form input[type="radio"], form input[type="checkbox"] {
    margin-left: 0.5em;
    margin-top: 0.5em;
    padding: 0;
}

<input type="checkbox" value="true" name="RememberMe">
<input type="hidden" value="false" name="RememberMe">
<label for="RememberMe" class="checkbox remember-me">Remember me?</label>

Answer 4

应该是这样的：它会在左侧显示checkbox而在右侧显示remember me?。

<form>
    <li>
       <input type="checkbox" value="true" name="RememberMe">
       <label for="RememberMe" class="checkbox remember-me">Remember me?</label>
       <input type="hidden" value="false" name="RememberMe">
    </li>
</form>

Answer 5

从表单标签中删除display：block，然后输入'float：left;'在输入复选框上。

你使用的是.label，还是错误，

您可以使用以下方式进行更新：

  label .remember-me {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

 input[name=RememberMe] {
    margin-left: 0.5em;
   margin-top: 0.5em;
   padding: 0;
   float:left;
   clear:left;
 }

您可能必须使用！important或父#id作为DOM中可用的附加选择器点。

如何使复选框和标签出现在同一行？

5 个答案: