Размещение изображений внутри элемента BUTTON (HTML & CSS)

Question

У меня есть простая кнопка (как показано ниже), на которой мне нужно отобразить две картинки, по одной с каждой стороны текста кнопки. Я борюсь за создание CSS, который будет работать как в Firefox, так и в Internet Explorer! (изображения кнопок поступают из файла обложки пользовательского интерфейса JQuery)

CSS

button div{
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_d19405_256x240.png);      
}

button div.leftImage{
    background-position: -96px -112px;
    float: left;
}

button div.rightImage{
    background-position: -64px -16px;
    float: right;
}

HTML

<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>

Preview

Firefox

альтернативный текст http://i44.tinypic.com/auh7v7.jpg

Internet Explorer 8

альтернативный текст http://i39.tinypic.com/16234g1.jpg

Answer 1

Вот как это сделать

Теория

Блочные элементы (например, DIV), хотя отображаются в порядке их создания, будут располагаться рядом с предыдущим элементом или, если не хватает места, на следующей строке. Поскольку мы не хотим придавать кнопке ширину (мы хотим, чтобы размер кнопки автоматически изменялся в зависимости от содержимого кнопки), элементы блока продолжали появляться на следующей строке (см. Изображение IE8 в вопросе выше). Использование white-space:nowrap заставляет встроенные элементы (такие как SPAN и EM) отображаться в одной строке, но игнорируется блочными элементами, поэтому решение приведено ниже.

CSS

button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_3d3d3d_256x240.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;
}

HTML

<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>

Результат

Internet Explorer 6, 7, 8 и Firefox 1.5, 2, 3

альтернативный текст http://i40.tinypic.com/14d0l86.jpg

Answer 2

Я бы использовал span, а не div для контейнеров изображений, так как вы, кажется, хотите, чтобы изображения выглядели встроенными. Использование плавающих элементов div просто слишком сложно.

На самом деле, вы, вероятно, могли бы еще больше упростить ситуацию, применив одно фоновое изображение к самой кнопке, а другое - к текстовому промежутку кнопки и полностью удалив два других контейнера.

Другая альтернатива - просто добавить изображения в виде тегов img.

Answer 3

Я знаю, что это уже решено, но просто хотел добавить, что простой способ поместить более 1 изображения в кнопку - это создать 1 .png с размерами кнопки, которую вы хотите создать, и элементами to вместе в одном файл.

Answer 4

Я думаю, что вы можете удалить тег кнопки и использовать вместо него тег div. Для другого действия кнопки используйте функцию javascript onlick () и используйте css для изменения курсора при наведении курсора (чтобы он выглядел как кнопка). Для моего проекта я Используется аналогичный подход. Это может вам помочь:)

Answer 5

попробуйте сбросить кнопку css.

button{
border:none;
background:none;
padding:0;
margin:0;
}

И добавьте пробел внутри пустого DIV, посмотрите, работает ли он.

<button><div class="leftPic">&nbsp;</div><span>Button Text</span><div class="rightPic">&nbsp;</div></button>