使用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扩展按钮的长度

回答

相关问题