jquery - 相对于文本框定位元素

Question

我正在处理这个 asp.net mvc 3 View ，我在其中使用自定义 jQuery 日历让用户选择日期进行搜索。问题是我无法完全按照我想要的方式显示日历。我对 CSS 有非常基本的了解，但是日历是绝对位置的，所以据我所知，我需要一个父元素来定位。所以我决定为我的下拉菜单和文本框使用表格，所有这些都是不同的搜索选项。我试过的一件事是:

@using (Html.BeginForm())
{
    var dateID = "jc_dateBefore";
    var calParent = "jcalendar_parentBefore";
    <table>
    <tr>
        <td>
            @Html.DropDownList("kkcId", (SelectList)ViewBag.KKCNames, "Изберете ККС", new { @class = "validateClassKKCType" })
        </td>
        <td>
            @Html.DropDownList("UserId", (SelectList)ViewBag.UserNames, "Изберете Потребител", new { @class = "validateClassKKCType" })   
        </td>
        <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>
        <td>
            @Html.DropDownList("statusId", (SelectList)ViewBag.Status, "Изберете Статус", new { @class = "validateClassKKCType" })
        </td>
        <td>
            <input type="submit" value="Search" />
        </td>
    </tr>
    </table>
}

我粘贴了整个代码，尽管我几乎可以肯定这是纯 CSS 问题，与此处使用的其他技术无关。所以特定于日历的代码是这个片段:

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

当我使用上面的方法时，我得到了这个结果:

当我需要它位于左侧文本框下方时，日历位于右侧下拉列表下方，如果用户选择日历，它实际上是显示日期的位置。

如果我像这样更改代码段的代码:

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

将一切合而为一<td>元素然后我得到这个:

这几乎是我想要的，但正如您所看到的，文本框略低于其他元素。如果我从 <img> 中删除边距标记然后文本框回到原位，但日历图像失去正确的位置。

这是日历的 CSS:

.jcalendar_parent{
    z-index: 999;
    position: absolute;
}

关于如何正确显示我的元素的任何想法？另外，我正在使用表格，因为这是我唯一能想到的，但根本不必使用它。如果有更好的方法，请提出。

附言

我不认为这是一个解决方案，但这是目前看来可行的方法:

 <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>

像这样将元素放在表格中我得到了这个:

这是在浏览器上为日历呈现的 HTML:

<td>
            <input class="jc_dateBefore" id="jc_dateBefore" name="selDate" type="text" value="Изберете Дата" />
            <div id="jcalendar_parentBefore" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('jcalendar_parentBefore', 'jc_dateBefore')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>

Answer 1

例子

这是一个 similar example

输入间距

生成日历的 Javascript 可能引入了一个将输入框向下推并导致出现空格的元素，或者您遇到了垂直对齐问题:

日历定位

在 CSS 中，如果使用 position: relative; 定位对象或 position: absolute;然后它将根据最接近的 position 定位。编辑家长。

你的 <td> ，日历的父元素，应设置为 position: relative;

.parent { position: relative; }

然后您可以控制日历的位置:

.jcalendar {
  top: 10px;
  left: 0;
}

请注意:.jcalendar只是一个示例类。我不确定您使用的是哪种 javascript 日历实现，因此请检查您应该定位的类名(使用浏览器检查器)。