圓形按鈕 - 如何STRETCH時裏面的文字全寬

我已經創建了一個圖像來說明我的問題：圓形按鈕 - 如何STRETCH時裏面的文字全寬

enter image description here

正如你所看到的。我有一個大的圓形按鈕。它由3個圖像組成。一張圖片在右側，另一張在左側，另一張在中間。

左右圖像相當寬，因爲按鈕中有一個漸變，所以我不能讓它們只有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/[email protected]') right center no-repeat; 
    padding-right: 100px; 
} 
#index-navigation ul li a span.left { 
    background: url('/images/[email protected]') left center no-repeat; 
    padding-left: 100px; 
} 
#index-navigation ul li a span.middle { 
    background: url('/images/[email protected]') left center repeat-x; 
}

如何編輯風格能有錨採取按鈕的整個寬度？就像這樣：

enter image description here

來源

2012-06-11 Richard Knop

爲什麼不這樣做呢？ http://jsfiddle.net/Qc9cU/2/ –

@EricFortis，可能是因爲圖像不僅僅是一個圓形的邊框？ – Qtax

你有你的文字移到一個單獨的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%; 
}

UPDATE

或者，如果你想有一個CSS3解決方案，不關心老IE-那麼你可以使用:before和:after僞元素以更清晰的標記 - http://jsfiddle.net/JutRB/4/

來源

2012-06-11 12:11:19

已更新爲具有更清潔的HTML（但不適用於較舊的IE-s） –

嗨Zoltan。它的工作原理是我的背景圖像是透明的。所以左右圖像不是很好。你可以在後臺看到中間的圖像。 –

給你'a：before'和'a：after'' border-radius'太 - http://jsfiddle.net/JutRB/5/ –

這是滑門技術，從fa現在，隨着邊界線和優雅的退化，舊版瀏覽器在市場上越來越受到關注。

演示中的a標籤確實佔據了整個區域，因爲它包裹了內部2跨度，所以您要確保刪除寬度聲明，以便它隨文本擴展。

如果你有一個演示，我們可以更專門爲你調試它。

來源

2012-06-11 12:16:15 adriatiq

實際上Zoltan已經很好地解決了這個問題。 – adriatiq

圓形按鈕 - 如何STRETCH時裏面的文字全寬

回答

相關問題