Image jQuery移动头中的图像_Image_Jquery Mobile_Header

Image jQuery移动头中的图像

image jquery-mobile

Image jQuery移动头中的图像,image,jquery-mobile,header,Image,Jquery Mobile,Header,我正在尝试在基于jQuery Mobile的网页标题中添加图像我希望图像对齐到右边缘，并为此使用CSS。但结果并不令人满意（问题*）图像和边缘之间有很大的间隙，并且与标题文本不对齐。以下是标题代码： <header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header&

我正在尝试在基于jQuery Mobile的网页标题中添加图像

我希望图像对齐到右边缘，并为此使用CSS。但结果并不令人满意

（问题*）图像和边缘之间有很大的间隙，并且与标题文本不对齐。

以下是标题代码：

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

像这样的方法应该会奏效：

<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；}
.align right{float:right；margin right:0px；}
我的应用程序

根据您的代码示例，在

alt

属性和

class

属性之间需要一个空格

你有：

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

应该是：

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

另外，最好不要在

元素中包含

标记

有关自定义标题的更多信息，请查看文档：

无需添加自定义样式等。jquerymobile已经有了这方面的内置解决方案。只需将类“ui-btn-left”或“ui-btn-right”添加到您的图像中（就好像它是一个按钮），就可以了

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


我的应用程序

我知道以前有人问过这个问题，但我想这可能会帮助那些仍在寻找解决方案的人。此外，这个问题没有被设置为已回答。

在我的例子中，我在标题中使用了一个链接作为按钮，我希望在右上角显示图像的地方得到相同的结果。我还希望在图像中添加其他属性，如无文本、无角、无光盘等。仅使用ui btn就打破了这些其他属性。修复方法是在类中同时包含ui btn和ui btn，如下所示：

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

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