将标签与复选框水平对齐

Question

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

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

    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>

Answer 2

按照以下代码片段更改您的样式（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

我已经解决了你的问题。请运行下面的片段，

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>

将标签与复选框水平对齐

Align label with Checkbox horizontally

html

css

checkbox

jquery

text-align