可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have one word on a page and each separate letter is a link. I'd like to reduce the size of the clickable area so that there is no space surrounding the letters. Right now it's fine on the left and right of each letter, but there is too much space above and below each letter. I included a border around the links for illustrative purposes (see fiddle below).

Any ideas on how?

HTML:

<body>
  <div>
    <h1><a href=#>H</a></h1>
    <h1><a href=#>E</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>O</a></h1>
  </div>
</body>

CSS:

    body {
        font-family: 'Sigmar One', cursive;
        font-size: 100px;
        color: white;
        text-shadow: 4px 4px 4px #000;

        background-color:blue;

        width: 100%;
        height: 100%;
        margin: 0;
    }

    a {
        border: 1px solid black;
    }

    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 0px 2px 3px rgba(255,255,255,.25);
        -webkit-background-clip: text;
           -moz-background-clip: text;
                background-clip: text;
    }

    a:hover {
        text-shadow: 4px 4px 4px #000;
        color: white;
    }

FIDDLE: http://jsfiddle.net/8Huu7/10/

回答1:

In addition to programminginallston answer you can also add overflow hidden and widen the box, so :

a {
  display: inline-block;
  line-height: 1em;
  overflow: hidden;
  width: 180px;
}

Although that does clip the H, unfortunately.

回答2:

update your a tag css to include

a {
    display: inline-block;
    line-height: 1em;
}

You need to change the display so that you can work with the box of the element like it is a block, while still allowing it to move inline with the text. You then change the line-height to be only the height of the text. Browsers typically add a greater line-height for readability.

Here is the updated jsfiddle: http://jsfiddle.net/QSL6T/

回答3:

This happens because there is reserved space for diacritics. If you wanted to show Á or Ç, for instance, there would be no extra space.

A possible workaround is to define margin-top to your text and overflow: hidden to your container. Here's an example fiddle.

回答4:

Maybe this ?

    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }

Reduce clickable area for link

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

Reduce clickable area for link

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮