DIV 基线上的超链接

Question

我有以下标记：

<div class="ui-accordion ui-widget" style="margin: 10px 0px 12px 0px;">
    <h3 class="ui-helper-reset ui-corner-top ui-accordion-header ui-state-default" 
        style="height: 24px; font-weight: bold; padding: 5px 0px 0px 12px">Title</h3>
    <div class="ui-accordion-content-active ui-widget-content ui-corner-bottom accordionContent" 
         style="height:150px; padding: 8px 12px;">
        <ul>
            <li style="background-image:url('/_assets/images/image1.png');">
               <%= Html.ActionLink("Link 1", "Index", "Home") %>
            </li>
            <li style="background-image:url(/_assets/images/image2.png);">
               <%= Html.ActionLink("Link 2", "Index", "Home") %>
            </li>
            <li style="background-image:url(/_assets/images/image3.png);">
               <%= Html.ActionLink("Link 3", "Index", "Appointment") %>
            </li>
        </ul>
    </div>
</div>

在 Chrome 上呈现以下框（没有红色矩形）

我想在红色矩形的位置添加一个超链接。我该怎么做？

请注意，所有使用的样式都是内联的，并且类都来自 jquery UI 标准类。我不是设计师，也许这个标记可以优化。欢迎任何建议... :)

感谢您的帮助！

Answer 1

在<div class="ui-accordion ...> 内添加一个div 并使用以下样式：

position: absolute;
right: 4px;
bottom: 4px;
width: 5em;
height: 1.5em;

[EDIT]父div 必须有position: relative 否则它将不起作用（感谢Daniel）[/EDIT]

注意，你应该给盒子一个确定的尺寸；你不能让它自己“成长”。不过width: 100%; 没问题。

另请注意，此 div 不会扩展父 div 的大小。如果手风琴太小，则最后一个条目将与您的链接重叠。解决方案是向手风琴添加一个具有必要高度的空div，以便为绝对定位的人腾出空间。