0

リンクの背景のスタイルを設定する必要があります。幅が異なるため、2 つの画像を使用する必要があるため、リンク内にスパンがあります。

リンクを左にフロートさせる必要もありました。つまり、両方をクリアするように段落を設定する必要があります。

私のソリューションは機能しますが、多くの css と余分な html 要素を追加しているようです。よりエレガントなソリューションはありますか？

http://jsfiddle.net/p9aXg/16/

<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>

<a href="#" class="my-link"><span>   This is a link sdafsdafsdaf   </span>
</a>

<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>

a {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
    line-height: 50px;
    float: left;
}
a span {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
    height: 49px;
    display: block;
    padding-left: 20px;
    padding-right: 40px;
}
p {
       clear: both;
}
4

3 に答える 3

1

フローティングの代わりに「display;inline-block」を使用すると、CSS を少し削除できます。

ここで更新されたフィドルを参照してください: http://jsfiddle.net/p9aXg/19/

a {
     background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
     display:inline-block;
}

a span {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;    
    line-height: 50px;
    display: block;
    padding-left: 20px;
    padding-right: 40px;
}

スタイリングに関する一般的な注意事項として、可能であれば常にフローティングを避けるようにしてください。要素をフロートすると、ページの流れから外れます。これにより、通常、他の要素をフロートさせて、ページの流れの中にあるかのように並べることができます。すべての要素が浮かんでいるところまで雪だるま式になるのを見てきましたが、これは単純に不必要な頭痛の種です。

ほとんどの場合、float の代わりに inline-block を使用するとうまくいきます。詳細については、次のリンクを参照してください: http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

フロート:左; vs ディスプレイ:インライン; vs ディスプレイ:インラインブロック; vs ディスプレイ:テーブルセル;

http://www.vanseodesign.com/css/inline-blocks/

http://www.ternstyle.us/blog/float-vs-inline-block

于 2013-08-25T13:23:55.323 に答える
0

サポートするブラウザの範囲全体で「プログレッシブ エンハンスメント」を採用すれば、画像や余分な要素を使わずにこれを行うことができます。例を次に示します: http://jsfiddle.net/Rt2Wa/4/

これは、CSS3 手法を使用して、最新のブラウザーの例と同じくらい良い結果を達成し、IE 7 & 8 でフラットだが面取りされたリンクを生成します。

ここでは、いくつかのテクニックを使用します。

  • display: inline-block (Ryan Henderson が言及 - 非常に便利です!)
  • 境界半径
  • 背景のグラデーション
  • :疑似要素の後
  • CSS 三角形 (ボーダー効果で作成)。

効果の基本は次のとおりです (該当する場合は、ベンダーがプレフィックスされたスタイルのバージョンのフィドルを参照してください)。

a:link {
    background-color: #18A580;
    background: linear-gradient(to bottom, rgba(29,186,144,1) 0%,rgba(24,165,128,1) 100%);
    box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.35), inset 0px 0px 1em 0px rgba(255, 255, 255, 0.4);
    border-radius: 0.3em;
    border-top: 1px solid #67D0BF;
    border-bottom: 1px solid #18805B;
    color: #FFF;
    display: inline-block;
    padding: 0.45em 0.75em;
    text-decoration: none;
    margin-bottom: 0.8em;
}

a:link:after {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0.25em 0 0.25em 0.5em;
    border-color: transparent transparent transparent #FFF;
    margin-left: 0.75em;
}
于 2013-08-25T14:04:37.577 に答える