web-dev-qa-db-ja.com

jQueryMobileヘッダーの画像

JQueryMobileベースのWebページのヘッダーに画像を追加しようとしています。

この目的のためにCSSを使用して、画像を右端に揃えたいと思います。しかし、結果は満足のいくものではありません。

（問題*）画像とエッジの間に大きなギャップがあり、ヘッダーテキストとも位置合わせされていません。

ヘッダーコードは次のとおりです。

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

これがクラスalign-rightのCSSコードです。

.align-right{ 
    float:right; 
    margin-right: 5px;
}
imagejquery-mobileheader
8
user1107888

カスタムスタイリングなどを追加する必要はありません。 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>

私は以前に質問があったことを知っていますが、これはまだ解決策を探している人に役立つかもしれないと思いました。その上、質問は答えられたように設定されていませんでした。

26
Gilly

コード例に基づいて、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

3
shanabus

このようなものが機能するはずです：

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

私の場合、ヘッダーのボタンとしてリンクを使用していたので、画像が右上隅に表示されるのと同じ結果が必要でした。また、テキストなし、コーナーなし、ディスクなしなど、画像に追加の属性を追加したかったのです。ui-btn-rightを単独で使用すると、これらの他の属性が壊れました。修正は、以下に示すように、クラスにui-btnとui-btn-rightの両方を含めることでした。

<a href="#entriesPanel" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all ui-alt-icon ui-nodisc-icon">Options</a>
0
S. Costello