2012-03-15 5 views
8

Я пытаюсь добавить изображение в заголовок моей веб-страницы, основанной на jQuery Mobile. Мне нужно, чтобы изображение было выровнено по правому краю и с помощью CSS для этой цели. Но результаты не являются удовлетворительными. Между изображением и краем большой разрыв, и он также не соответствует тексту заголовка. Вот код заголовка:Изображение в jquery Mobile Header

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header> 

и вот CSS код класса ALIGN-направо:

.align-right 
    { 
float:right; 
margin-right: 5px; 


    } 

ответ

1

Что-то, как это должно работать:

<head> 
    <style> 
    body{ margin: 0; } 
    .align-right{ float:right; margin-right: 0px;} 
    </style> 
</head> 
<body> 
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div> 
</body> 
+0

Этот метод также не работает – user1107888

3

на основе кода Например, вам нужно пространство между атрибутом alt и атрибутом class.

У вас есть:

alt="Low resolution logo"class="align-right" 

Должно быть:

alt="Low resolution logo" class="align-right" 

Кроме того, это, вероятно, лучше, чтобы не иметь <img /> тег внутри вашего <h1> элемента.

Заканчивать Документы для получения дополнительной информации о пользовательских заголовках: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

26

Нет необходимость добавлять пользовательские стили или такие. Jquery-Mobile уже имеет встроенные решения для этого. Просто добавьте к вашему изображению класс «ui-btn-left» или «ui-btn-right» (как если бы это была кнопка), и вы все настроены.

<header data-role="header"> 
<h1>My App</h1> 
<img src="my_logo.png" class="ui-btn-right" /> 
</header> 

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

Смежные вопросы