代码之家  ›  专栏  ›  技术社区  ›  Denk

如何删除链接与其所在列表项之间的所有填充?或单击打开其中的链接?

  •  3
  • Denk  · 技术社区  · 8 年前

    我的代码:

    <ul class='sub-menu'>
      <li><a href='something'>something</a></li>
      <li><a href='else'>else</a></li>
      <li><a href='another'>another</a></li>
    </ul>
    

    我可以单击任何列表项(li)的外部,链接将不会打开(就像链接本身和它所在的列表项之间存在填充)。我希望能够单击列表项的任何部分,并打开其中的链接。

    我一直在摆弄内联CSS,试图强制执行我想要的行为,但仍然没有成功。帮助

    2 回复  |  直到 8 年前
        1
  •  1
  •   Rick Hitchcock    8 年前

    在锚点上创建一个伪元素,该元素覆盖锚点的列表项,包括项目符号:

    .sub-menu li {
      position: relative;  /* to contain the absolute-positioned pseudo-element */
    }
    
    .sub-menu a:before {
      content: '';         /* required for most pseudo-elements */
      position: absolute;  /* absolutely positioned */
      top: 0;              /* ... at top of its list item */
      left: -50px;         /* ... to the left of its list item, including the bullet */
      right: 0;            /* to its list item's right */
      height: 100%;        /* the height of its list item */
    }
    

    代码段:

    .sub-menu li {
      position: relative;  /* to contain the absolute-positioned pseudo-element */
    }
    
    .sub-menu a:before {
      content: '';         /* required for most pseudo-elements */
      position: absolute;  /* absolutely positioned */
      top: 0;              /* ... at top of its list item */
      left: -50px;         /* ... to the left of its list item, including the bullet */
      right: 0;            /* to its list item's right */
      height: 100%;        /* the height of its list item */
    }
    <ul class='sub-menu'>
      <li><a href='something'>something</a></li>
      <li><a href='else'>else</a></li>
      <li><a href='another'>another</a></li>
    </ul>
        2
  •  0
  •   pavger    8 年前

    为ul指定字体大小:0;然后在列表项或定位元素上设置字体大小。