Размещение изображения на вкладке jQuery?

#jquery #html #css #jquery-ui #jquery-ui-tabs

#jquery #HTML #css #jquery-пользовательский интерфейс #jquery-ui-tabs

Вопрос:

Есть ли правильный способ разместить изображение рядом с тегом a в li, используемом в качестве вкладки jQuery?

 <div id="tabs">
  <ul>
     <li><a href="#">Text</a>{I want the image here}</li>
  </ul>
</div>

Использование div с изображением в качестве фона с использованием встроенного блока работает, но я читал, что встроенного блока следует избегать.

 <div style="display:inline" class="ui-icon ui-icon-refresh">

Есть ли способ лучше?

1. Я использую display:inline-block довольно регулярно. Единственное предостережение в том, что IE6 и IE7 отображают его только на встроенных элементах, но <a> теги попадают в эту категорию. Есть ли другие причины не использовать его? Источник: quirksmode.org

Ответ №1:

Разве вы не можете просто использовать изображение, выровненное по вертикали?

 <img src="image.jpg" style="vertical-align: middle" />

1. Это отлично работает. Я пытался использовать значок спрайта jquery, но вместо этого я могу использовать изображение.

2. Если ваше изображение должно следовать за текстом, это действительно простое решение. По умолчанию <img> является встроенным элементом, поэтому вы можете интегрировать его в текстовый поток. Вы также могли бы установить фоновое изображение на LI, выровненное по правому краю, для получения другого результата.

3. @Glauber Rocha Стилизация LI была бы хорошей идеей для внешнего вида, но я тестирую, как это будет работать с кнопкой обновления на текущей выбранной вкладке.

Ответ №2:

Это решение отлично работает для меня:

HTML-код вкладки:

 <div id="tabs">
     <ul>
    <li><a href="link1.php"><img src="image1.png" border="0">menu item 1</a></li>
    <li><a href="link2.php"><img src="image2.png" border="0">menu item 2</a></li>
    <li><a href="link3.php"><img src="image3.png" border="0">menu item 3</a></li>
    <li><a href="link4.php"><img src="image4.png" border="0">menu item 4</a></li>
     </ul>
</div>

И CSS

 #tabs ul li img, #second ul li img {
vertical-align: middle;
margin-right: 8px;
}