为复选框旁边的标签设置边距

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

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

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

来源

2016-03-31 ChickenLeg

把'。接触输入{保证金权：20px的; }'让我们完成 –

尝试这样的：Demo

你必须把checkbox外标签，你可以给margin-right的复选框。

更新：Demo

你甚至可以将标签贴这里里面的checkboxmargin 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>

所以输出会是这样：

enter image description here

来源

2016-03-31 10:40:00

感谢<3有时候我很累，我没有看到那些小小的，明显的东西。 – ChickenLeg

欢迎您..很高兴我的回答帮助您:) –

但请记住：如果您将复选框放在标签之外，您需要使用'for'属性将标签和输入相关联。 –

在这里你去

.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; 
 
}

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

来源

2016-03-31 10:41:15 omarCreativeDev

我希望这个作品

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

来源

2016-03-31 10:50:31 Cherish

为复选框旁边的标签设置边距

回答

相关问题