html - 使用 CSS 延长按钮的长度

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

好的，这里有几个选项:

这会改变内边距，每边增加 10px，让您更接近所需的宽度。大概填充还没有为 0，所以它不是每边都额外增加 10px。您可以根据自己的喜好进行调整。 (将填充视为您的内容/文本与容器边缘之间的距离，在本例中为按钮)

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

这会设置元素的确切宽度(同样，在本例中为按钮)。调整 500px 值以满足您的需要。

width: 500px;