0

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

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

当我为单行添加填充以实现完美对齐时，带有两行文本的文本会破坏它。我可以做一些适用于一条线和两条线的相对操作吗？

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;
}
4

1 回答 1

1

好吧，您要求在前进的道路上遇到挫折，但让我回答您的问题：

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

一、去掉绝对定位

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

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

td {
    vertical-align: middle;
}

三、去掉.level-heading中的padding

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

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

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

.level-heading { width: 120px; }

ETC...

于 2013-08-31T14:57:56.607 回答