Увеличьте длину кнопки с помощью 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;
}

Проблема, с которой я сталкиваюсь, заключается в том, что моя кнопка недостаточно длинна. Я хочу расширить его примерно на 20 пикселей, но я довольно новичок в CSS, и я занимаюсь тем, что беру уже существующий код и модифицирую его. Я играл с атрибутами в Firebug, но я не знаю, с чего начать, какие вкладки отвечают за влияние на какие элементы и т. Д.

Answer 1

Хорошо, вот несколько вариантов:

Это меняет отступы, добавляя 10 пикселей на каждую сторону, давая вам что-то ближе к желаемой ширине. Предположительно, отступ еще не равен 0, поэтому он не является дополнительным по 10 пикселей на каждой стороне. Вы можете настроить по своему вкусу. (Думайте о заполнении как о расстоянии между вашим контентом / текстом и краем контейнера, который в данном случае является кнопкой)

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

Устанавливает точную ширину элемента (опять же, в этом случае это будет кнопка). Настройте значение 500px в соответствии со своими потребностями.

width: 500px;

Answer 2

дает заполнение класса xp-t-bold. Это также увеличит ширину родительского диапазона.

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

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/