Question

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

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

    display:inline-block;

标签看起来是对齐的，但在像手机这样的小型设备中我想要出现：

"[] Other                   
 Unknown"

我想像这样对齐标签：

 "[] Other
     Unknown"

我怎样才能将标签对齐？

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

Answer 1

您只需要添加td.cstm-cls {display: flex;}

等CSS

＆＃13;

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

＆＃13;

  <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>

＆＃13;

Answer 2

改变你的风格，如下面的代码片段（CSS中的更改）

＆＃13;

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}

＆＃13;

  <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>

＆＃13;

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>

水平对齐标签与复选框

3 个答案: