具有锚点击填充

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));