使用CSS擴展按鈕的長度

我有以下的顯示按鈕的HTML代碼片段。使用CSS擴展按鈕的長度

<span class="xp-b-submit xp-b-submit-btn xp-b-right"> 
    <a href="#" class="xp-t-bold" id="PostSubmitLink">Post Search</a> 
</span>

除了HTML代碼，還有CSS樣式表。

.xp-b-submit-btn { 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-image: url("../../images/new_blue_button.png"); 
    background-origin: padding-box; 
    background-position: -1px 50%; 
    background-repeat: no-repeat; 
    background-size: auto auto; 
} 

.xp-b-submit { 
    background-position: right -32px; 
} 

.xp-b-submit, .xp-b-leftSide, .xp-b-submit-large, .xp-b-submit-large .xp-b-leftSide { 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-image: url("../images/buttonBG.png"); 
    background-origin: padding-box; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    background-size: auto auto; 
    display: block; 
} 

.xp-b-right { 
    float: right; 
}

我面對的問題是我的按鈕不夠長。我想將它擴展大約20px，但我對CSS很陌生，我正在做的是採用預先存在的代碼並對其進行修改。我一直在玩Firebug中的屬性，但我不知道從哪裏開始，哪些選項卡負責影響什麼元素等。

來源

2011-06-07 GobiasKoffi

'width：100px;' – 2011-06-07 16:59:49

好了，這裏有幾個選項：

這改變了填充，每邊增加10px，給你更接近所需寬度的東西。大概填充不是0，所以它不是每邊10px。您可以根據自己的喜好進行調整。（認爲填充的作爲內容/文本和容器，在這種情況下是按鈕的邊緣之間的距離）

padding-left: 10px; padding-right: 10px;

這再次設置元素（的準確寬度，在這種情況下將是按鈕）。調整500px值以符合您的需求。

width: 500px;

來源

2011-06-07 17:05:59 User1578

給出了xp-t-bold類的填充。這也會增加父跨度的寬度。

.xp-t-bold 
{ 
padding:20px; // overall width will be increased by 40px. 
}

來源

2011-06-07 17:04:22 Vinnyq12

這也會增加身高。它會增加40px的寬度，而不是20p（每邊20個）。也許填充：0 10px;是一個更好的選擇。 – sqram 2011-06-07 17:18:29

它沒有增加任何東西的高度，因爲這是一個跨度（至少在FF上沒有）。另請注意我在CSS中的評論。 – Vinnyq12 2011-06-07 21:23:14

我將width添加到您的.xp-b-submit-btn類中。（也是border，所以你可以看到發生了什麼......你可以將其刪除。）

.xp-b-submit-btn { 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-image: url("../../images/new_blue_button.png"); 
    background-origin: padding-box; 
    background-position: -1px 50%; 
    background-repeat: no-repeat; 
    background-size: auto auto; 
    width:95px; 
    border:1px solid black; 
}

http://jsfiddle.net/jasongennaro/HPVmv/

來源

2011-06-07 17:05:12

使用CSS擴展按鈕的長度

回答

相關問題