4

背景を使用してリンクのスタイルを設定したいと思います。

リンクが短い場合は背景に問題はありませんが、リンクが長すぎる場合、区切り線があり、背景が機能しなくなります。同じデザインではないため使用したくありませんtext-decoration: underline(スペースで区切られたカスタム ドット)。

HTML :

<a href="#">Ceci est un menu très long</a>
<a href="#">Blabl</a>

CSS :

a {  
   background: url(dotted.jpg) repeat-x;
}

ここに私の問題があります:

ここに画像の説明を入力

以下のようにそれを行うことは可能ですか？

ここに画像の説明を入力

と ：

ここに画像の説明を入力

4

7 に答える 7

4

これを試すことができます：

a {
  display: inline-block;
  max-width: 100px;
  text-decoration: none;
}

span {
  border-bottom: 1px dotted;
}
<a href='#'><span>click here to do something</span></a>

于 2014-07-03T13:05:38.763 に答える
1

奇妙に聞こえるかもしれませんが、ハッジ マージンを試すことができます :) :デモ

a {
    border-bottom:1px dotted;
    text-decoration:none;
    margin-right:100%;
}

インライン、しかし改行

于 2014-07-03T13:10:20.843 に答える
0

パーソナライズされたデザインが必要な場合は、ボーダー画像もありますが、Ie11...

于 2014-07-03T13:11:02.943 に答える
0

スパンを省略して、a{display:inline} を作成します。

<a href='#'>click here to do something</a>

a {
 display:inline;
 text-decoration:none;
 border-bottom: 1px dotted;
}

フィドル

よりクリーンで、魅力のように機能します。

于 2015-02-12T21:55:22.680 に答える
0

点線の下線に画像を追加する必要はありません。css の border-bottom プロパティをそのまま使用できます。

<a href="#">Ceci est un menu très bla bla bla bla nla bla bla bla nla</a> 

a{
  border-bottom : 2px dotted #CCC;
  text-decoration : none;  
 }

コードをテストするには、http://jsfiddle.net/mijoemathew/zhp6D/にアクセスしてください。

于 2014-07-03T13:24:51.990 に答える
0

プロパティを使用して最新のブラウザーでこれを行うことができborder-imageます: http://codepen.io/pageaffairs/pen/Gdxpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 120px;
}

a {
    text-decoration: none;  
    line-height: 1.6em; 
    text-transform: uppercase;
    border-width: 0 0 9px 0;
    -webkit-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat; /* Safari */
    -o-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;; /* Opera */
    border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;;
}

</style>
</head>
<body>

<div><a href="">Some text with an underline and background</a></div>

</body>
</html>
于 2014-07-03T13:08:24.703 に答える