使用 table 显示和 CSS 时如何对齐表单中的复选框？

Question

我需要对齐表单中的所有复选框。我们需要使用 table 显示并在 CSS 中设置样式。

form {
    display: table;
}
div.tableRow {
    display: table-row;
}
Div.tableRow p {
    display: table-cell;
    vertical-align: top;
    padding: 3px;
}
div.tableRow p:first-child {
    text-align: left;
}
h1 {
    font-weight: bold;
    font-size: 16px;
}

<form action="" method="POST">
        <div class="tableRow">
        <p>
        Address: <input type="text" name="Address"></p><br></div>
        <div class="tableRow"><p>
        Phone: <input type="tel" name="Phone">
        </p></div>
        <div class="tableRow">
        <p>
        <select name="size">
                <option value="Medium">Medium</option>
                <option value="Large">Large</option>
                <option value="X-Large">X-Large</option>
        </select></p></div>
        <div class="tableRow">
        <p>Crust:
                <input type="radio" name="crust" value="Thin"> Thin <br>
                <input type="radio" name="crust" value="Regular"> Regular
        </p></div>
        <div class="tableRow">
        <p> Toppings:
                <input type="checkbox" name="toppings" value="Pepperoni"> Pepperoni<br>
                <input type="checkbox" name="toppings" value="Beef"> Beef <br>
                <input type="checkbox" name="toppings" value="Italian Sausage"> Italian Sausage <br>
                <input type="checkbox" name="toppings" value="Green Peppers"> Green Peppers <br>
                <input type="checkbox" name="toppings" value="Onions"> Onions <br>
                <input type="checkbox" name="toppings" value="Mushrooms"> Mushrooms <br>
                <input type="checkbox" name="toppings" value="Banana Peppers"> Banana Peppers <br>
                <input type="checkbox" name="toppings" value="Jalapenos"> Jalapenos <br>
                <input type="checkbox" name="toppings" value="Black Olives"> Black Olives <br>
        </p></div>
        <div class="tableRow">
        <p> Extras:
                <input type="checkbox" name="extras" value="Drink"> Drink <br>
                <input type="checkbox" name="extras" value="Breadsticks"> Breadsticks <br>
                <input type="checkbox" name="extras" value="Cheesesticks"> Cheesesticks <br>
        </p></div>
        <div class="tableRow">
        <p>
        <input type="submit" value="Place Order">
        </p></div>
</form>

这是它的样子：

它应该是这样的：

Answer 1

只需将所有 input 标签移到 p 标签之外。

这是一个工作 fiddle:

form {
  display: table;
}

.tableRow {
  display: table-row;
}

.tableRow p {
  display: table-cell;
  vertical-align: top;
  padding: 3px;
}

.tableRow p:first-child {
  text-align: left;
}

h1 {
  font-weight: bold;
  font-size: 16px;
}

<form action="" method="POST">
  <div class="tableRow">
    <p>
      Address: </p>
    <input type="text" name="Address">
    <br>
  </div>
  <div class="tableRow">
    <p>
      Phone:
    </p>
    <input type="tel" name="Phone">
  </div>
  <div class="tableRow">
    <p></p>
    <select name="size">
      <option value="Medium">Medium</option>
      <option value="Large">Large</option>
      <option value="X-Large">X-Large</option>
    </select>
  </div>
  <div class="tableRow">
    <p>Crust:</p>
    <input type="radio" name="crust" value="Thin"> Thin
    <br>
    <input type="radio" name="crust" value="Regular"> Regular</div>
  <div class="tableRow">
    <p> Toppings:
    </p>
    <input type="checkbox" name="toppings" value="Pepperoni"> Pepperoni
    <br>
    <input type="checkbox" name="toppings" value="Beef"> Beef
    <br>
    <input type="checkbox" name="toppings" value="Italian Sausage"> Italian Sausage
    <br>
    <input type="checkbox" name="toppings" value="Green Peppers"> Green Peppers
    <br>
    <input type="checkbox" name="toppings" value="Onions"> Onions
    <br>
    <input type="checkbox" name="toppings" value="Mushrooms"> Mushrooms
    <br>
    <input type="checkbox" name="toppings" value="Banana Peppers"> Banana Peppers
    <br>
    <input type="checkbox" name="toppings" value="Jalapenos"> Jalapenos
    <br>
    <input type="checkbox" name="toppings" value="Black Olives"> Black Olives
    <br>
  </div>
  <div class="tableRow">
    <p> Extras:
    </p>
    <input type="checkbox" name="extras" value="Drink"> Drink
    <br>
    <input type="checkbox" name="extras" value="Breadsticks"> Breadsticks
    <br>
    <input type="checkbox" name="extras" value="Cheesesticks"> Cheesesticks
    <br>
  </div>
  <div class="tableRow">
    <p></p>
    <input type="submit" value="Place Order">
  </div>
</form>

Answer 2

为此，首先对每个输入使用 html 标签：

<label for="Address">Address</label>

然后给标签一个class和以下属性：

labelClass {
    display: inline-block;
    width: 50px; /* or however wide you need */
}

使用 table 显示和 CSS 时如何对齐表单中的复选框？

How can I align the checkboxes in a form when using table display with CSS?

html

css

forms

checkbox

css-tables

这是它的样子：

它应该是这样的：