1

我有以下 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还是使标签不显示为disply：block？

更新：

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

label.remember-me {

}

input#RememberMe {

}
4

5 回答 5

2

标签的显示属性应该是inline-block。您可以在此处阅读有关显示选项的更多信息。

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

演示：小提琴

更新：

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

演示：小提琴

于 2013-02-25T05:59:04.927 回答
2

你Display:Block在labelcss中使用的是问题所在。
删除它，它会工作。

左侧的复选框。

<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>

看小提琴

于 2013-02-25T05:59:41.047 回答
1 
.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>
于 2013-02-25T06:03:59.897 回答
0

应该是这样的：它将显示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>
于 2013-02-25T06:04:36.433 回答
0

从表单标签中删除显示：块，并放入'float：left;' 在输入复选框上。

你是在使用 class .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 中可用的附加选择器点。

于 2013-02-25T06:05:10.110 回答