Вопросы Теги

Помещение изображений в элементе КНОПКИ (HTML & CSS)

У меня есть простая кнопка (как показано ниже), на котором я должен отобразить два изображения, один по обе стороны от текста кнопки. Я борюсь для создания CSS, который будет работать и в Firefox и в Internet Explorer! (изображения кнопки появляются из файла UI 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

Предварительный просмотр

Firefox

alt text

Internet Explorer 8

alt text

9
задан Glorfindel 22 July 2019 в 15:06
поделиться

3 ответа

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

Теория

Блочные элементы (например, 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

alt text

16
ответ дан 4 December 2019 в 11:41
поделиться

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

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

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

2
ответ дан 4 December 2019 в 11:41
поделиться

попробуйте переустановить 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>
0
ответ дан 4 December 2019 в 11:41
поделиться