我在表格内的CSS中有一个TextBox。我在使用表,因此无法在文本框中使用position: absolute。还有其他方法可以将弹出窗口(hint2)放置和浮动在文本框的正下方吗?

我的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>

最佳答案

尝试将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看起来像什么。

07-24 09:44
查看更多