5

ページには 1 つの単語があり、それぞれの文字がリンクになっています。文字の周りにスペースがないように、クリック可能な領域のサイズを小さくしたいと思います。今のところ、各文字の左右は問題ありませんが、各文字の上下にスペースがありすぎます。説明のために、リンクの周りに境界線を含めました (下のフィドルを参照)。

方法についてのアイデアはありますか？

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;
    }

フィドル: http://jsfiddle.net/8Huu7/10/

4

4 に答える 4

1

これは、分音記号用に予約されたスペースがあるために発生します。たとえば、Á または Ç を表示したい場合、余分なスペースはありません。

margin-top可能な回避策は、テキストとoverflow: hiddenコンテナーに定義することです。これが fiddle の例です。

于 2013-08-12T22:48:04.493 に答える
1

aタグCSSを更新して含める

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

を変更してdisplay、要素のボックスをブロックのように操作できるようにしながら、テキストと一緒にインラインで移動できるようにする必要があります。line-height次に、 をテキストの高さだけに変更します。ブラウザは通常、line-height読みやすさのためにより大きな値を追加します。

更新された jsfiddle は次のとおりです: http://jsfiddle.net/QSL6T/

于 2013-08-12T22:29:02.180 に答える
-1

たぶんこれ？

    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }
于 2013-08-12T22:58:53.350 に答える