, имеющие якоря нажмите площадь крышки родительских элементы отступов

Question

У меня есть <ul> на моем сайте со структурой в значительной степени идентичны этим: http://jsfiddle.net/tRzPH/1/

Ссылки участок с синей каймой. То, что я пытаюсь сделать, это растянуть до зеленых границ справа и слева и до оранжевых границ сверху и снизу. Но, конечно, сохранение позиции фактического текстового контента.

Я не уверен, как это сделать, особенно потому, что якоря не должны быть родительскими элементами элементов списка.

Любые советы?

Answer 1

Если я правильно понимаю, это то, что вы пытаетесь выполнить, не так ли? Вам нужно немного JQuery http://jsfiddle.net/elclanrs/tJ3kv/

HTML:

<ul> 
    <li><a href="#"> 
      <h2>item1</h2> 
      <p>Lorem Ipsum Dolor Sit Amet</p> 
     </a></li> 
    <li><a href="#"> 
      <h2>item2</h2> 
      <p>Lorem Ipsum Dolor Sit Amet</p> 
     </a></li> 
    <li><a href="#"> 
      <h2>item3</h2> 
      <p>Lorem Ipsum Dolor Sit Amet</p> 
     </a></li> 
</ul> 

CSS:

body { margin: 50px; } 
ul { 
    border: 1px solid orange; 
    overflow: hidden; 
    display: inline-block; 
} 

h2 { 
    font-size: 24px; 
    font-weight: bold; 
} 

li { 
    float: left; 
    width: 150px; 
    border-right: 1px solid green; 
} 
li:last-child { border: 0; } 
a { 
    display: block; 
    border: 1px solid blue; 
    margin: 4px; 
    padding: 1em; 
    color: black; 
    text-decoration: none; 
} 

JQ:

var getMaxHeight = function ($elms) { 
    var maxheight = 0; 
    $elms.each(function() { 
     if ($(this).height() > maxheight) { 
      maxheight = $(this).height(); 
     } 
    }); 
    return maxheight; 
}; 

var $elms = $('ul li a'); 
$elms.height(getMaxHeight($elms));