jQuery MobileベースのWebページのヘッダーに画像を追加しようとしています。画像を右端に揃えて、この目的で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>
、ここでは、クラスALIGN-右のCSSコードです：
.align-right
{
float:right;
margin-right: 5px;
}
このような何かが動作するはずです：
あなたのコードに基づいて<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>
たとえば、alt属性とclass属性の間にスペースが必要です。
あなたは持っている：
alt="Low resolution logo"class="align-right"
は次のようになります。
alt="Low resolution logo" class="align-right"
また、あなたの<h1>要素の内側に<img />タグを持っていないし、おそらくより良いです。カスタムヘッダーの詳細については、ドキュメントアウト
チェック：http://jquerymobile.com/test/docs/toolbars/docs-headers.html
カスタムスタイリングや、そのようなを追加する必要はありません。 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>
私は以前に質問された質問を知っていますが、これは解決策を探している人に役立つかもしれないと思いました。また、その質問は答えとして設定されていませんでした。
この方法も機能しません – user1107888