展开< a>标记来填充空格 [英] Expand an <a> tag to fill the space
本文介绍了展开< a>标记来填充空格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何让锚标签展开到列表项的底部？
我知道我可以把锚点放在列表项标签，但是打破XHTML 1.0严格遵守，所以我不能这样做。
How can I make the anchor tag expand to the bottom of the list item? I know I could put the anchor round the list item tag, but that breaks XHTML 1.0 Strict compliance, so I cannot do it.
<html>
<head>
<style>
#listWrapper { text-align:center;}
#list { margin-left: 0px auto; margin-right: 0px auto; width: 100%; min-height: 100%; height:100%; margin-bottom: 10px; margin-top: 0px;}
#list ul { padding: 5px 10px 10px 10px; margin: 0; min-height: 100%;}
#list li { clear:both; font-weight:bolder; height:auto; border-bottom: 1px solid Silver; border-left: 1px solid Silver; font-size:x-small; border-right: 1px solid Silver; list-style-type: none;}
#list a:hover { background-color: red;}
#list a { display:block; cursor:pointer; text-decoration: none; text-align:left; vertical-align:top; }
#list h3 { background-color:Silver; vertical-align:top; font-size:larger; }
#list img { height:auto; margin: 8px; float:left; vertical-align:top; border:solid 1px Silver;}
</style>
</head>
<body>
<div id="listWrapper">
<div id="list">
<ul>
<li>
<h3>title</h3>
<a href="#">
<img src="/images/x.jpg" alt="" />
Lorem ipsun........
</a>
<div style="clear:both;" />
</li>
<li>
<h3>title</h3>
<a href="#">
<img src="/images/x.jpg" alt="" />
Lorem ipsun........
</a>
<div style="clear:both;" />
</li>
</ul>
</div>
</div>
</body>
</html>
推荐答案
很多感谢....
#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }
这篇关于展开< a>标记来填充空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
