jQuery Mobile Header中的图像

Question

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

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

(问题*)图像和边缘之间有很大的距离，并且也未与标题文本对齐。

这是 header 代码:

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

Answer 1

无需添加自定义样式等。 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>

我知道这个问题以前已经被问过了，但是我认为这可能对那些仍在寻找解决方案的人有所帮助。此外，这个问题没有被回答。