如何防止複選框/單選按鈕下的長文本標籤包裝？

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>