在复选框旁边设置标签边距

Question

我想在复选框旁边设置文本边距。在我的HTML中它看起来像是一行，但在我的网站上，由于字体，它需要两个（这对我来说非常好）。

无论我做什么：如果我使用填充，边距或边框，每次只有我的文本的第一行向右移动一点，但第二行正好紧挨着我的复选框。你可以帮帮我吗？

jsFiddle

.contact input {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  outline: 1px solid #24ba9f;
  float: left;
}
.contact label {
  font-size: 18px;
  text-align: left;
  color: #b2b2b2;
  text-align: left;
  line-height: normal;
  padding-left: 10px;
}

<div class="contact">
  <label>
    <input type="checkbox" checked>Lorem ipsum, lorem ipsum, lorem ipsum
  </label>
</div>

Answer 1

我希望这有效

<div class="contact">
   <input type="checkbox" id="test" checked/>
  <label for="test">Lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>

.contact input{
  width:50px;
}
.contact label{
  cursor:pointer;
}

Answer 2

请尝试以下操作： Demo

您必须将checkbox置于标签之外，并且可以为margin-right提供复选框。

更新： Demo

您甚至可以将checkbox放在标签内，因为此处margin right已使用相同的css指定HTML structure已更改

<div class="contact">
             <label><input type="checkbox" checked> 
                Lorem ipsum, lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum, lorem ipsum
                Lorem ipsum, lorem ipsum, lorem ipsum
                Lorem ipsum, lorem ipsum, lorem ipsum
                Lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
              </label>
            </div>

因此输出将是这样的：

Answer 3

你去吧

＆＃13;

＆＃13;

.contact input {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  outline: 1px solid #24ba9f;
  float: left;
}

.contact label {
  font-size: 18px;
  text-align: left;
  color: #b2b2b2;
  text-align: left;
  line-height: normal;
  padding-left: 10px;
}

.contact span {
  display:inline-block;
  margin-top:10px;
}

＆＃13;

<div class="contact">
  <label>
    <input type="checkbox" checked>
    <span>Lorem ipsum, lorem ipsum, lorem ipsum</span>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;