jQuery Mobile Header中的图像

use*_*888 8 image header jquery-mobile

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

我希望图像与右边缘对齐,并使用CSS实现此目的.但结果并不令人满意.

(问题*)图像和边缘之间存在较大间隙,并且也未与标题文本对齐.

这是标题代码:

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
Run Code Online (Sandbox Code Playgroud)

这是class align-right的CSS代码:

.align-right{ 
    float:right; 
    margin-right: 5px;
}
Run Code Online (Sandbox Code Playgroud)

Gil*_*ong 26

无需添加自定义样式等.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>
Run Code Online (Sandbox Code Playgroud)

我知道这个问题之前已被问过,但我认为这可能会帮助那些仍在寻找解决方案的人.此外,这个问题没有得到回答.


gre*_*rth 1

像这样的东西应该有效:

<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>
Run Code Online (Sandbox Code Playgroud)