我正在尝试水平对齐表格。我把它们放在同一个div中。我也尝试使用:每个表的内联块,但它不起作用。 "颜色"桌子总是停留在底部而不是与"部件#34;表
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
但结果却是
我的CSS代码:
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color:#999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 36%;
position: relative;
margin-top: 0px;
}
答案 0 :(得分:1)
您可以在两个子表上使用display: inline-table
,如下所示。
您需要考虑如何最好地处理表格标题,以便获得样式 你想要的。
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color: #999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 20px; /* adjust as neeeded */
position: relative; /* not needed */
margin-top: 0px;
}
#tables {
border: 1px dotted blue; /* for demo only */
}
#tables table {
display: inline-table;
border: 1px dotted gray;
vertical-align: top; /* you need to decide how best to align the child tables */
}
&#13;
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
</div>
&#13;