我需要在表单中对齐所有复选框。我们需要使用表格显示来表单并在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>
答案 0 :(得分:1)
只需将所有input
代码移到p
代码之外即可。
这是一个工作小提琴:
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>
答案 1 :(得分:0)
要做到这一点,首先要为每个输入使用html标签:
<label for="Address">Address</label>
然后为标签指定一个类和以下属性:
labelClass {
display: inline-block;
width: 50px; /* or however wide you need */
}