Question

我有以下HTML代码片段，显示一个按钮。

<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中的属性，但我不知道从哪里开始，哪些标签负责影响哪些元素等。

Answer 1

给出xp-t-bold类填充。这也会增加父跨度的宽度。

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

Answer 2

好的，这里有几个选项：

这会改变填充，每侧增加10px，为您提供更接近所需宽度的东西。据推测，填充不是已经为0，因此每侧的填充量不是10px。你可以根据自己的喜好进行调整。（将填充视为内容/文本与容器边缘之间的距离，在本例中为按钮）

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

这设置了元素的确切宽度（在这种情况下，也就是按钮）。调整500px值以满足您的需求。

width: 500px;

Answer 3

我已将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/

使用CSS扩展按钮的长度

3 个答案: