Html 展开 <a> 标签以填充空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1378718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand an <a> tag to fill the space
提问by simon831
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.
如何使锚标记扩展到列表项的底部？我知道我可以将锚点放在列表项标签周围，但这会破坏 XHTML 1.0 Strict 的合规性，所以我不能这样做。
<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>
回答by simon831
A combination of your answers fixed it. Many thank....
您的答案组合修复了它。多谢....
#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }
回答by soniiic
use this css:
使用这个CSS：
#list ul li a { display: block }
回答by ZippyV
Put the
放在
<br style="clear: both;"/>
inside the Anchor tag.
在 Anchor 标签内。
EDIT: changed div to br
编辑：将 div 更改为 br
回答by Tomas Aschan
To fill the bottom, you need to fix the image margins - right now the image is taking up too much space with it's 8pxmargin. To fill the top, you need to remove the bottom margin of h3.
要填充底部，您需要修复图像边距 - 现在图像的边距占用了太多空间8px。要填充顶部，您需要删除 的底部边距h3。
#list h3 { margin-bottom: 0; }
#list img { margin: 5px 8px; }
回答by awe
Try set height on the #listto a fixed size, and height on #list ato 100%.
尝试将 上的高度设置#list为固定大小，并将高度设置#list a为100%。
Differences to your existing code:
与现有代码的差异：
#list
{
min-height: 100px;
height: 100px;
}
#list a
{
height:100%;
}
回答by Brandon Montgomery
Here's what I did:
这是我所做的：
<!-- teh codes -->
<style type="text/css">
.nav-cell
{
height: 35px;
padding: 0px; /* just to make sure the link will fill the entire cell */
text-align: center;
width: 92px;
}
.nav-cell-link
{
display: block;
width: 100%;
height: 100%;
}
.nav-cell-link-text
{
display: block;
padding-top: 11px;
}
</style>
<!-- teh codes -->
<table cellpadding="0" cellspacing="0" style="height: 35px;">
<tr>
<td class="nav-cell">
<a href="#" class="nav-cell-link">
<span class="nav-cell-link-text">Link Text</span>
</a>
</td>
</tr>
</table>
<!-- teh codes -->
