jquery - 将标签与复选框水平对齐

Question

我是这个论坛的新手，我发现了一个我真的不知道如何解决的问题。

我有一个带有复选框列表的表格。一切都很好。我用过:

    display:inline-block;

标签看起来是对齐的，但在像手机这样的小型设备中我更希望出现:

"[] Other                   
 Unknown"                                 

我想像这样对齐标签:

 "[] Other
     Unknown"

我怎样才能使标签看起来像那样？

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

Answer 1

你只需要添加 CSS，如 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>