Obraz w jquery Mobile Header

Próbuję dodać obraz w nagłówku mojej strony internetowej opartej na jQuery Mobile. Chcę, aby obraz był wyrównany do prawej krawędzi i przy użyciu CSS do tego celu. Jednak wyniki nie są zadowalające. Istnieje duża luka między obrazem a krawędzią, która nie jest również wyrównana z tekstem nagłówka. Oto kod nagłówka:Obraz w jquery Mobile Header

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

i oto kod css dla klasy align prawej:

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


    }

Źródło

2012-03-15 user1107888

Coś jak to powinno działać:

<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>

Źródło

2012-03-15 15:15:28 greatwitenorth

Ta metoda również nie działa – user1107888

oparciu o kodzie Na przykład potrzebujesz spacji między atrybutem alt a atrybutem class.

Masz:

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

Powinno być:

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

Ponadto, jest to chyba lepiej nie mieć tag <img /> wewnątrz elemencie <h1>.

Sprawdź docs więcej informacji na temat niestandardowych nagłówków: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

Źródło

2012-03-15 15:24:02 shanabus

Nie trzeba dodawać niestandardowe stylizacji lub takie. Jquery-Mobile ma już wbudowane rozwiązania do tego. Po prostu dodaj klasę "ui-btn-left" lub "ui-btn-right" do swojego obrazu (jakby to był przycisk) i wszystko gotowe.

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

Wiem, że pytanie zostało zadane wcześniej, ale uznałem, że może to pomóc tym, którzy wciąż szukają rozwiązań. Poza tym pytanie nie zostało postawione jako odpowiedź.

Źródło

2012-10-08 13:31:28

Obraz w jquery Mobile Header

Odpowiedz

Powiązane problemy