将标签与复选框水平对齐

Question

I'm new in this forum and i found a problem i really don't know how to resolve.

I have a table with a checkbox list. And everything is ok. i used:

    display:inline-block;

And the label look align but in small devices like mobile phones i would like instead to appear:

"[] Other                   
 Unknown"                                 

I would like to align the label like this:

 "[] Other
     Unknown"

How could i align the label to appear like that?

https://jsfiddle.net/apastorts/d9efnf08/

Answer 1

You just have to add CSS like td.cstm-cls {display: flex;}

 body{width:40%;} label{display:inline;font-size:11px;} td.cstm-cls { display: flex; } 

  <table class='table'> <thead> <h3>Crane Brand</h3> </thead> <tbody> <tr> <td><input type="checkbox" name="craneBrands[]" value='Demag'><label>Demag</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Kone'><label>Kone</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Starluff'><label>Starluff</label></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Gis'><label>Gis</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='JDN Monocrane'><label>JDN Monocrane</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Monosteel'><label>Monosteel</label></input></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Litfking'><label>Litfking</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Atlas Copco'><label>Atlas Copco</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Ingersoll Rand'><label>Ingersoll Rand</label></input></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Hitachi'><label>Hitachi</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Kito'><label>Kito</label></input></td> <td class="cstm-cls"><input type="checkbox" name="craneBrands[]" value='Other/Unknown'><label>Other / Unknown</label></input></td> </tr> </tbody> </table> 

Answer 2

Change your style like following code snippet (changes in CSS)

 body{width:40%;} td{padding:0px} label{display:inline;font-size:11px;display:flex;word-wrap: break-word;} input[type=checkbox]{float:left;padding:0px} 

  <table class='table'> <thead> <h3>Crane Brand</h3> </thead> <tbody> <tr> <td><input type="checkbox" name="craneBrands[]" value='Demag'><label>Demag</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Kone'><label>Kone</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Starluff'><label>Starluff</label></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Gis'><label>Gis</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='JDN Monocrane'><label>JDN Monocrane</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Monosteel'><label>Monosteel</label></input></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Litfking'><label>Litfking</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Atlas Copco'><label>Atlas Copco</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Ingersoll Rand'><label>Ingersoll Rand</label></input></input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Hitachi'><label>Hitachi</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Kito'><label>Kito</label></input></td> <td><input type="checkbox" name="craneBrands[]" value='Other/Unknown'><label>Other /Unknown</label></input></td> </tr> </tbody> </table> 

Answer 3

I have solve your issue. Please Run the below snippet ,

 label { display: inline-block; font-size: 11px; } .table td input, .table td label { float: left; } .table td input { margin: 0px 5px 0; } 

 <table class='table'> <thead> <h3>Crane Brand</h3> </thead> <tbody> <tr> <td><input type="checkbox" name="craneBrands[]" value='Demag'> <label>Demag</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Kone'> <label>Kone</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Starluff'> <label>Starluff</label> </input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Gis'> <label>Gis</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='JDN Monocrane'> <label>JDN Monocrane</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Monosteel'> <label>Monosteel</label> </input> </input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Litfking'> <label>Litfking</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Atlas Copco'> <label>Atlas Copco</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Ingersoll Rand'> <label>Ingersoll Rand</label> </input> </input> </tr> <tr> <td><input type="checkbox" name="craneBrands[]" value='Hitachi'> <label>Hitachi</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Kito'> <label>Kito</label> </input></td> <td><input type="checkbox" name="craneBrands[]" value='Other/Unknown'> <label>Other /Unknown</label> </input></td> </tr> </tbody> </table>