Expand an tag to fill the space

2019-01-25 02:45发布

站内问答 / HTML/CSS
1712 6 3

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>

标签： html css xhtml
举报
6条回答
倾城　Initia
2楼-- · 2019-01-25 03:19

A combination of your answers fixed it. Many thank....

#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2019-01-25 03:23

use this css:

#list ul li a { display: block }
查看更多
0人赞 添加讨论(0) 举报
疯言疯语
4楼-- · 2019-01-25 03:30

Try set height on the #list to a fixed size, and height on #list ato 100%.

Differences to your existing code:

    #list
    {
        min-height: 100px;
        height: 100px;
    }

    #list a
    {
         height:100%;
    }
查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
5楼-- · 2019-01-25 03:32

To fill the bottom, you need to fix the image margins - right now the image is taking up too much space with it's 8px margin. To fill the top, you need to remove the bottom margin of h3.

#list h3 { margin-bottom: 0; }
#list img { margin: 5px 8px; }
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
6楼-- · 2019-01-25 03:40

Put the

<br style="clear: both;"/>

inside the Anchor tag.

EDIT: changed div to br

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
7楼-- · 2019-01-25 03:40

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 -->
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)