展开<a>标签以填充空间

sim*_*831 22 html css xhtml

如何将锚标记扩展到列表项的底部?我知道我可以将锚点放在列表项标签上,但是这违反了XHTML 1.0严格的合规性,所以我不能这样做.

<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>
Run Code Online (Sandbox Code Playgroud)

sim*_*831 52

你的答案组合修复了它.多谢....

#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }
Run Code Online (Sandbox Code Playgroud)


son*_*iic 11

用这个css:

#list ul li a { display: block }
Run Code Online (Sandbox Code Playgroud)