html - 如何在 CSS 中将弹出窗口定位在对象的正下方

Question

我在表格的 css 中有一个 TextBox。我不能在文本框中使用 position: absolute 因为我正在使用表格。有没有其他方法可以将弹出窗口 (hint2) 定位并 float 到文本框的正下方？

我的 CSS 代码是:

/* The hint to Hide and Show */
#hint2 {
    display: none;
    position: absolute;
    right: 25px;
    top: 65px;
    width: 125px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 8px 12px;
    background: #ffc;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial;
}

/* The pointer image is hadded by using another span */
#hint2 .hint2-pointer {
    position: absolute;
    left: 5px;
    top: -10px;
    width: 19px;
    height: 10px;
    background: url(images/pointer.gif) left top no-repeat;
}

我的文本框 HTML 是:

<input style="background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" />

我目前在弹出窗口中使用 position: absolute 但这只会使其相对于页面。当我调整窗口大小时，弹出窗口会更改位置。

最初看起来是这样的:

这是 HTML 代码:

<td style="width:20%" align="right"> <!-- 55% -->
    <table width="100%" class="right">
        <tr>
            <td style="vertical-align:middle; white-space:nowrap;" class="auto-style2 subNavOrg">
                <a href="default.aspx">HOME</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="https://login.myonline.com/">My ONLINE</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="patient_information.aspx">INFORMATION</a>
                <br />
                <input style="position: relative; background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" />
                <span id="hint2">Search query is empty<span class="hint2-pointer">&nbsp;</span></span>
                <input id="Button1" type="button" value="Search" class="locButton" />
            </td>
        </tr>
    </table>
</td>

Answer 1

尝试将 inline-block 元素放在您试图放置在彼此下方的两个元素周围:

<table width="100%" class="right">
    <tr>
        <td style="vertical-align:middle; white-space:nowrap;" class="auto-style2 subNavOrg">
            <a href="default.aspx">HOME</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://login.myonline.com/">My ONLINE</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="patient_information.aspx">INFORMATION</a>
            <br />
            <span class="ib">
                <input style="position: relative; background: url(images/find.png) center left no-repeat; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 4px; font-family: Arial, Verdana; color: #EB620E" type="text" id="TextBox1" size="10" />
                <br />
                <span id="hint2">Search query is empty<span class="hint2-pointer">&nbsp;</span></span>
            </span>
            <input id="Button1" type="button" value="Search" class="locButton" />
        </td>
    </tr>
</table>

然后使用下面的CSS代码:

.ib {
  display:inline-block;
  vertical-align:top;
}

如果你坚持使用内联样式，也可以将class="ib"替换为style="display:inline-block;vertical-align:top;"，但通常最好将样式与内容分开，以便于维护。

Here's a demo这会是什么样子。