如何使用单元格创建可扩展集合？答案

【问题标题】：How to create expandable collection with cells?如何使用单元格创建可扩展集合？
【发布时间】：2018-03-28 18:43:48
【问题描述】：

我正在开发一个 php 应用程序，试图从 MySQL 数据库中动态选择，并根据用户可以用来管理其配置的表格行来使用可配置单元格填充页面。我试图让每个单元格看起来大致像这样：

但是，我不太确定如何到达那里。我的第一个想法是为单元格的每个元素使用单独的 div：

 .stockcellcontainertext {
   position: absolute;
   vertical-align: middle;
   text-align: center;
   left: 0;
   width: 15%;
   height: 100%;
   margin: auto;
 }

 .stockcellcontainercheckbox {
   display: inline-block;
   position: absolute;
   vertical-align: middle;
   right: 0;
   width: 75%;
   height: 100%;
   margin: auto;
 }

然后我尝试了一种更基本的方法，<table>

<form action="update_client.php" method="get">
  <table style="width: 100%;">
    <tr>
      Symbol: <br>
      <input type="text" name="symbol000" value="GOOG">
    </tr>
    <tr>
      <input type="checkbox" name="input0" value="Hull's Moving Average" checked>
      <label for="input0">input0</label>
      <input type="checkbox" name="input1" value="Moving Average 200-Days" checked>
      <label for="input1">input1</label>
      <input type="checkbox" name="input2" value="Moving Average 50-Days" checked>
      <label for="input2">input3</label>
    </tr>
  </table>
</form>

但是它们似乎都将复选框降低了一个等级，我似乎无法将它们并排放置。

输出

【问题讨论】：

标签： html css forms layout

【解决方案1】：

使用表格的方法

<table> 在每个 <td> 中都有行

示例

<form action="">
  <table>
    <tr>
      <td>
        <label for="">Label</label><br>
        <input type="text">
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 1</label></div>
        <div><input type="checkbox"><label for="">Input 2</label></div>
        <div><input type="checkbox"><label for="">Input 3</label></div>
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 4</label></div>
        <div><input type="checkbox"><label for="">Input 5</label></div>
        <div><input type="checkbox"><label for="">Input 6</label></div>
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 7</label></div>
        <div><input type="checkbox"><label for="">Input 8</label></div>
        <div><input type="checkbox"><label for="">Input 9</label></div>
      </td>
      <td>
        <input type="submit">
      </td>
    </tr>
  </table>
</form>

使用 flexbox 的方法

行是display: flex，列是flex: 1。复选框被包裹在<li>（也可以是<div>）中。

示例

.my-form {
  border: 5px solid blue;
  width: 700px;
}

.my-form>.row {
  display: flex;
  align-items: center;
}

.my-form .col {
  flex: 1;
  padding: 15px;
}

.my-form label {
  display: inline-block;
  margin-bottom: 10px;
}

.my-form input {
  padding: 10px;
  border: 2px solid #000;
}

.my-form input[type="submit"] {
  width: 100%;
  border-radius: 20px;
}

.my-form input+label {
  margin-left: 10px;
}

.my-form ul {
  list-style: none;
  padding: 0;
}

<form class="my-form" action="">
  <div class="row">
    <div class="col">
      <label>Text Value:</label><br>
      <input type="text" placeholder="Textinput1">
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input1</label></li>
        <li><input type="checkbox"><label for="">input2</label></li>
        <li><input type="checkbox"><label for="">input3</label></li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input4</label></li>
        <li><input type="checkbox"><label for="">input5</label></li>
        <li><input type="checkbox"><label for="">input6</label></li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input7</label></li>
        <li><input type="checkbox"><label for="">input8</label></li>
        <li><input type="checkbox"><label for="">input9</label></li>
      </ul>
    </div>
    <div class="col">
      <input type="submit">
    </div>
  </div>
</form>

提示

【讨论】：