Предотвратить подталкивание соседнего значка fontawesome/bootstrap при наведении в ячейке таблицы

Я сделал скрипку, чтобы продемонстрировать свою проблему и то, что я пытаюсь сделать.

http://jsfiddle.net/kvseelbach/rXEEZ/20/

Я пробовал следующий CSS:

td a[class^="icon-"]:before, td a[class*="icon-"]:before { padding-right:2px; }

Я использую FontAwesome с начальной загрузкой и хочу предотвратить подталкивание второго значка в каждой ячейке (отображать/редактировать ссылки на записи), когда первая ссылка наводится и увеличивается. Я пробовал прозрачную рамку, отступы прямо на: перед элементом и т. Д. И не смог это усовершенствовать.

Как я могу заставить это работать гладко с CSS?


icons alignment css twitter-bootstrap font-awesome
person kevins    schedule 27.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Самый простой:

.dr-fxwidth {
    width: 48px;
    white-space: nowrap; /* <<< */
}

http://jsfiddle.net/userdude/rXEEZ/21/

Он по-прежнему изменяет макет таблицы, но не приводит к тому, что элементы значков вызывают перенос текста.

person Jared Farrish    schedule 27.03.2013
comment
Хм, если вы не поняли мой вопрос или ваш браузер отображает таблицу по-другому, вот изображение. Посмотрите, как значок рядом со значком наведенной ссылки немного сдвинут вправо. Имгур - person kevins; 27.03.2013
comment
Ваша скрипка полностью обернула правый значок под левым, наведя курсор на левый значок. Вы используете font-size: 110%; для их выращивания, с чем не так-то просто справиться. - person Jared Farrish; 27.03.2013
comment
Я заметил, что значок перекрывает исходное положение соседнего, поэтому я добавил дополнительные отступы, но проблема осталась той же. См. Редакция 2. - person kevins; 27.03.2013
comment
Вы хотите, чтобы значок увеличивался в размерах при наведении? - person Jared Farrish; 27.03.2013
comment
Если я установлю размер увеличения в пикселях, а не в процентах, как я могу предотвратить сдвиг с помощью CSS? - person kevins; 27.03.2013
comment
Хм, на самом деле я не вижу увеличения размера значка при наведении, но так он выглядит чище. Мне нравится расстояние между иконками. Спасибо. - person kevins; 27.03.2013
comment
Все дело в интервалах между padding и :hover: jsfiddle.net/userdude/rXEEZ/30 - person Jared Farrish; 27.03.2013