jQuery中的圖像移動頭

我正在嘗試在基於jQuery Mobile的網頁的頁眉中添加圖像。我希望將圖像與右邊緣對齊併爲此使用CSS。但結果並不令人滿意。圖像和邊緣之間存在很大差距，也與標題文本不一致。這裏是頭部代碼：jQuery中的圖像移動頭

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

，這裏是類對齊，右側的CSS代碼：

.align-right 
    { 
float:right; 
margin-right: 5px; 


    }

來源

2012-03-15 user1107888

像這樣的東西應該工作：基於您的代碼

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

來源

2012-03-15 15:15:28 greatwitenorth

此方法也不起作用 – user1107888 2012-03-15 15:33:12

例如，您需要alt屬性和class屬性之間的空格。

您有：

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

應該是：

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

而且，它可能是最好不要有你<h1>元內的<img />標籤。

退房的文檔的詳細信息，自定義頁眉：http://jquerymobile.com/test/docs/toolbars/docs-headers.html

來源

2012-03-15 15:24:02 shanabus

無需添加自定義樣式或此類。 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>

我知道這個問題已被問過，但我想這可能會幫助那些仍在尋找解決方案的人。此外，這個問題沒有被回答。

來源

2012-10-08 13:31:28

jQuery中的圖像移動頭

回答

相關問題