通过表格对齐表单中的文本和下拉列表

Question

我知道我在使用表格时错了，但这似乎是最可行的选择。

我正在尝试在表单中对齐文本和下拉列表。问题是文本可以是单行或双行，当我想让它们在同一行中保持相同时，很难给它一个相对高度。

当我为单行填充填充以进行完美对齐时，带有两个行文本的文本会将其删除。我可以做一些适合一行和两行的事情吗？

HTML

<table>

<tbody>
<tr>
    <td style="width: 120px;" class="level-heading">
        <div style="position: absolute;">Client Name</div>

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbClientName" id="MainContent_cmbClientName" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">
        <div style="position: absolute;">Business Segment</div>

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbBusinessSegment"  id="MainContent_cmbBusinessSegment" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">Business Segment Category

    </td>
    <td style="width: 130px">
        <div class="level">
            <select name="ctl00$MainContent$cmbBusinessSubGroup" id="MainContent_cmbBusinessSubGroup" class="level-big" style="width:180px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
</tr>



<tr>
    <td style="width: 120px;" class="level-heading">Experience Test From

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbFrom"  id="MainContent_cmbFrom" style="height:16px;width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">Experience Test To

    </td>
    <td style="width: 120px" align="justify">
        <div class="level">
            <select name="ctl00$MainContent$cmbTo" id="MainContent_cmbTo" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px">
        <span id="MainContent_lblPeriodTo"></span>
    </td>
    <td style="width: 130px"></td>
</tr>
<tr>
    <td colspan="6" style="height: 10px"></td>
</tr>

</tbody>
    </table>

CSS

这是与上述问题相关的CSS。

.level-heading {
    font-size: 12px;
    padding-bottom: 12px;
}
.decision-page select {
    font-size: 12px;
}
.fullpage-width {
    width: 896px;
}

Answer 1

嗯，你要求在前进的道路上感到沮丧，但让我回答你的问题：

看看这个小提琴：http://jsfiddle.net/7tyjx/

首先，删除绝对定位

<td style="width: 120px;" class="level-heading">
    <div>Client Name</div>
</td>

其次，将td的垂直对齐设置为中间

td {
    vertical-align: middle;
}

第三步，从.level标题中删除填充

.level-heading {
    font-size: 12px;
}

在小提琴中，我添加了一些边框，这样你就可以看到对齐是如何工作的，并且由于同样的原因，给出了td的夸大高度。

让生活更轻松 - 尝试使用类名来识别元素和样式的类，然后将这些样式移动到样式表 - 即你有一个名为.level-heading的样式，然后你添加一个内联样式宽度。将该宽度移出标记

.level-heading { width: 120px; }

等...