Question

我正在开发一个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>

但他们似乎都把复选框推到了一个等级，我似乎无法将它们并排放在一起。

输出

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

<强>提示

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

1 个答案:

使用表

实施例

使用 flexbox

实施例