如何防止复选框/单选按钮下的长文本标签包装？

Question

Sample Markup and CSS

.wrap { 
 
    width: 220px; 
 
} 
 

 
.indi-wrap { 
 
    padding-bottom: 10px; 
 
} 
 

 
.control-label { 
 
    display: inline; 
 
    font-weight: 300; 
 
} 
 

 
button.btn-link { 
 
    background: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="wrap"> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Xonsectetur adipiscing.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
</div>

注： 我知道我可以只是包装标签内的复选框来修复，但是从“INDI-包装”类中的填充它的自动启动父母“换行”为此，我无法编辑“换行”内的任何内容。

有什么办法可以将文本标签的第二行对齐到第一行吗？防止它包装在复选框下。

Answer 1

保持现有标记，一个简单的方法来实现一些接近的事情是在.indi-wrap的3个孩子和max-width上使用inline-block来将它们全部放在一行中。

.indi-wrap > * { 
    display: inline-block !important; 
    max-width: 70%; 
    vertical-align: top; 
} 

.wrap { 
 
    width: 220px; 
 
} 
 

 
.indi-wrap { 
 
    padding-bottom: 10px; 
 
    display: block; 
 
} 
 

 
.indi-wrap > * { 
 
    display: inline-block !important; 
 
    max-width: 70%; 
 
    vertical-align: top; 
 
} 
 
.control-label { 
 
    font-weight: 300; 
 
} 
 

 
button.btn-link { 
 
    background: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="wrap"> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Xonsectetur adipiscing.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
</div>

Answer 2

一去的办法是把里面的标签输入和按键，然后用display:block的标签，还积极和消极的利润，这样的

.wrap { 
 
    width: 220px; 
 
} 
 

 
.indi-wrap { 
 
    padding-bottom: 10px; 
 
} 
 

 
label.control-label { 
 
    display:block; 
 
    font-weight: 300; 
 
    margin-left: 20px; 
 
} 
 
input{ 
 
    float: left; 
 
    margin-left: -20px !important; 
 
} 
 

 
button.btn-link { 
 
    background: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrap"> 
 
    <div class="indi-wrap"> 
 
    <label class="control-label"> 
 
    <input type="checkbox" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. 
 
    <button type="button" class="btn btn-link">only</button></label> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <label class="control-label"> 
 
    <input type="checkbox" />Xonsectetur adipiscing. 
 
    <button type="button" class="btn btn-link">only</button></label> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <label class="control-label"> 
 
    <input type="checkbox" />Sed do eiusmod tempor incididunt ut labore. 
 
    <button type="button" class="btn btn-link">only</button></label> 
 
    </div> 
 
</div>

Answer 3

你可以尝试这样的

.wrap { 
 
    width: 220px; 
 
} 
 

 
.indi-wrap { 
 
    position: relative; 
 
    padding-bottom: 10px; 
 
} 
 

 
.indi-wrap input[type='checkbox'] { 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
.control-label { 
 
    padding-left: 20px; 
 
    font-weight: 300; 
 
    font-size: 14px; 
 
    display: block 
 
} 
 

 
button.btn-link { 
 
    background: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 14px; 
 
    padding-left: 20px; 
 
}

<div class="wrap"> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Xonsectetur adipiscing.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
</div>

Answer 4

您可以使用Flexbox的实现这个事情。

.wrap { 
 
    width: 220px; 
 
} 
 

 
.indi-wrap { 
 
    padding-bottom: 10px; 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
.indi-wrap input { flex: 1; } 
 
.indi-wrap label { flex: 7; } 
 

 
.control-label { 
 
    display: inline; 
 
    font-weight: 300; 
 
} 
 

 
button.btn-link { 
 
    background: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="wrap"> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Xonsectetur adipiscing.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
    <div class="indi-wrap"> 
 
    <input type="checkbox" /> 
 
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label> 
 
    <button type="button" class="btn btn-link">only</button> 
 
    </div> 
 
</div>