Bild in jQuery Mobile Header

Ich versuche, fügen Sie ein Bild in den header meiner jQuery-Mobile-basierte web-Seite.

Möchte ich das Bild bündig an den rechten Rand und die Verwendung von CSS für diesen Zweck. Aber die Ergebnisse sind nicht zufriedenstellend.

(Problem*)Es gibt eine große Kluft zwischen dem Bild und dem Rand und es ist auch nicht im Einklang mit dem header-text.

Hier ist der header code:

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

und hier ist der CSS code für die Klasse align-right:

.align-right{ 
    float:right; 
    margin-right: 5px;
}
InformationsquelleAutor user1107888 | 2012-03-15
  1. 26

    Keine Notwendigkeit zum hinzufügen von benutzerdefinierten styling oder so. Jquery-Mobile hat bereits integrierte Lösungen. Fügen Sie einfach die Klasse "ui-btn-left' oder 'ui-btn-right", um Ihr Bild (als wenn es ein button) und Sie sind alle gesetzt.

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

    Ich weiß, wurde die Frage gestellt, bevor, aber ich dachte, dies könnte helfen, diejenigen, die noch auf der Suche nach Lösungen. Außerdem, die Frage war nicht gesetzt, als beantwortet.

    InformationsquelleAutor Gillian Lo Wong
  2. 3

    Basierend auf deinem code-Beispiel, müssen Sie ein Leerzeichen zwischen den alt Attribut und die class Attribut.

    Haben Sie:

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

    Werden sollte:

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

    Außerdem ist es wahrscheinlich besser, nicht die <img /> tag in Ihrer <h1> element.

    Schauen Sie sich die Dokumentation für mehr Informationen über benutzerdefinierte Header: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

    InformationsquelleAutor shanabus
  3. 1

    Etwas wie dies funktionieren sollte:

    <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>
    • Diese Methode funktioniert auch nicht
    InformationsquelleAutor greatwitenorth
  4. 0

    In meinem Fall war ich über einen link als button in meinem Kopf, und ich wollte, dass die gleichen Ergebnisse, wo das Bild zeigen würde, in der oberen rechten Ecke. Ich wollte auch zusätzliche Attribute Hinzugefügt, um das Bild wie kein text, keine Ecken, keine CD, usw. Mit dem ui-btn-right-allein brach diese anderen Attribute. Das Update wurde sowohl ui-und ui-btn-btn-right-in der Klasse, wie unten gezeigt:

    <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>
    InformationsquelleAutor S. Costello
Schreibe einen Kommentar