как мне придать моей кнопке спрайт без установки ширины или использования текстового отступа?

#css

Вопрос:

Я думаю, это можно сделать с помощью какой-то магии встроенного блока? возможно?

idk .. но в принципе, текст и спрайт должны быть встроенными.

прямо сейчас это не так:http://jsfiddle.net/DerNalia/qvZkK/2

HTML:

 <a href="" class="action_button" rel="facebox" style="">
    <span class="button_sprite_x"></span>
    Delete
</a>

1. Предполагается, что подчеркнут только текст («Удалить»)?

2. обычно нет. но это стиль текста тега привязки по умолчанию. добавление текстового оформления: отсутствует; устраняет подчеркивание o.o

3. Итак, вы хотите, чтобы подчеркивания там никогда не было? Я не понимаю, как должна выглядеть кнопка.

Ответ №1:

Позволит ли ваш макет перемещать ее?

 .action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  width: 20px;
  height: 20px;
  display: block;
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/3/

Обновить:

Ах, но вы, вероятно, хотите, чтобы спрайт находился на фоне a элемента. Для этого используется комбинация display: inline-block и float: left .

 .action_button {
  display: inline-block; /* Add display: inline-block to .action_button */
}

.action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  display: inline-block; /* And add display: inline-block here, also */
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/4/

1. Закрыть… Мне нужен спрайт внутри butto, хотя = Я обнаружил, что могу установить для спрайта значение display: table-cell, а для привязки — display: table; , но тогда высота кнопки изменяется (высота кнопки равна 18, увеличивается до 22 со спрайтом внутри).

2. @TheLindyHop Да, только что понял, что это, вероятно, то, чего ты хотел. Смотрите обновление.

3. Это работает, но на самом деле это не лучший способ сделать это, IMO. Вы создаете интервал только для изображения, которое не является семантическим. Поместите текст внутри диапазона и добавьте немного отступов влево и высоту строки, равные высоте изображения. Таким образом, вам не придется беспокоиться о том, чтобы все расставить по полочкам.

Ответ №2:

поместите текст внутри интервала: http://jsfiddle.net/qvZkK/7 /

Переместите a тег влево
Поместите текст внутрь <span> , т. е. <span> DELETE </span>
Удалите width из .button_sprite_x класса и присвоите ему padding-left: 25px
Убедитесь, что фоновое изображение не повторяется

Похоже, вы можете самостоятельно придумать, как правильно оформить ее оттуда. PS — Я добавил поле к ссылке, чтобы ее было легче видеть, вы, вероятно, захотите это удалить.

1. есть ли другой способ центрировать спрайт без использования положения фона? потому что с текущим выбранным ответом на этот вопрос мне нужно было бы использовать position: relative и переместить спрайт на 2 пикселя сверху и слева.

2. Да, вероятно, это как-то связано с высотой строки .action_button . Попробуйте line-height: 20px; .