гиперссылка на базовой линии 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; 

[EDIT] Родитель div должен иметь position: relative или он не будет работать (благодаря Daniel) [/ EDIT]

Обратите внимание, что вы должны придать коробке определенный размер; вы не можете заставить его «расти» сами по себе. width: 100%; все в порядке.

Также обратите внимание, что этот div не увеличивает размер родителя div. Если аккордеон слишком мал, то последняя запись будет перекрываться с вашей ссылкой. Решение состоит в том, чтобы добавить пустой div с необходимой высотой для аккордеона, чтобы освободить место для абсолютно позиционированного.