发表新帖
发表新帖

Stretching tag to fill entire

  • 前端 未结
    关注
    10 542
    南旧
    南旧 2020-11-28 08:59

    Here\'s a simple menu structure:

    相关标签:
    10条回答
    • 粉色の甜心
      2020-11-28 09:27

      I used this code to fill the width and height 100%

      HTML

      <ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

      CSS

      li a {
   display: block;
   height: 100%; /* Missing from other answers */
}
      0 讨论(0)
    • 生来不讨喜
      2020-11-28 09:28 
      <!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

      You should try to avoid using a class on every tag so your content remains easy to maintain.

      0 讨论(0)
    • 庸人自扰
      2020-11-28 09:33

      Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag

      0 讨论(0)
    • 别跟我提以往
      2020-11-28 09:38

      A different approach: 

      <ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}

      This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire li clickable.

      0 讨论(0)
    • 一向
      2020-11-28 09:39

      Just style the A with a display:block;:

      ul#menu li a { display: block;}
      0 讨论(0)
    • 醉梦人生
      2020-11-28 09:41

      I wanted this functionality only on tab view i.e below 720px, so in media query I made:

      @media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}
      0 讨论(0)
     看不清?
    提交回复
    热议问题