2

私の問題を説明するために画像を作成しました：

ここに画像の説明を入力

ご覧のように。大きな丸いボタンがあります。3枚の画像で構成されています。1 つは右側、もう 1 つは左側のサイズ、もう 1 つは中央にあります。

ボタンでグラデーションが行われているため、左右の画像はかなり幅が広いため、幅を 5px にすることはできません。問題は、内部のテキストが中央の領域に制限されていることです。ボタン全体に広げたいと思います。

ここに私のスタイルがあります：

#index-navigation ul li a {
    height: 96px;
    line-height: 96px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: url('/images/btn_grey@2x-right.png') right center no-repeat;
    padding-right: 100px;
}
#index-navigation ul li a span.left {
    background: url('/images/btn_grey@2x-left.png') left center no-repeat;
    padding-left: 100px;
}
#index-navigation ul li a span.middle {
    background: url('/images/btn_grey@2x-middle.png') left center repeat-x;
}

アンカーがボタンの幅全体を占めるようにスタイルを編集するにはどうすればよいですか? このような：

ここに画像の説明を入力

4

2 に答える 2

6

テキストを別の場所に移動して、テキストspan全体に拡大できるようにする必要がありますa。あなた.leftと.right適切な背景を与えるだけでa、メインのbgを保持させてください-http://jsfiddle.net/JutRB/3/

a {
    height: 96px;
    width: 350px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: beige;
    border: 2px solid #000;
    display: inline-block;
    position: relative;
}

a span.left, a span.right {
    float: left;
    background: yellow;
    height: 96px;
    width: 100px;
    display: inline-block;
}

a span.right {
    float: right;
    background: pink;
}

a span.text {
    position: absolute;
    display: block;
    text-align: center;
    top: 30px;
    width: 100%;
}
​

アップデート

または、CSS3ソリューションが必要で、古いIEを気にしない場合は、マークアップがはるかにクリーンな疑似要素:beforeと:after疑似要素を使用できます-http://jsfiddle.net/JutRB/4/

于 2012-06-11T12:11:19.677 に答える
0

これは引き戸の手法であり、境界半径と、市場で牽引力を得ている古いブラウザーへの優雅な劣化により、最近では支持されなくなっています。

デモの a タグは、内側の 2 つのスパンをラップするため、領域全体を使用しますが、幅の宣言を削除して、テキストで拡張する必要があります。

デモをお持ちの場合は、もう少し具体的にデバッグできます。

于 2012-06-11T12:16:15.147 に答える