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内添加<div class="ui-accordion ...>：

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

[编辑] 父div必须有position: relative，否则无效（感谢Daniel） [/ EDIT] < /强>

请注意，你应该给盒子一个确定的尺寸;你不能让它自己“成长”。 width: 100%;可以。{/ p>

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