1

JQuery Mobileでは、[戻る]ボタンが左側に配置され、タイトルが中央に配置されたヘッダーを作成しています。理想的には、これら2つの要素を同じ行に配置する必要がありますが、スペース上の理由で2つの要素を同じ行に収めることができない場合（特に描写モード）、タイトルを[戻る]ボタンの下に少し移動する必要があります。どのCSS属性を使用する必要がありますか？

コードは次のとおりです。

<div class="back-header" data-role="header" data-position="fixed" position="absolute" data-theme="a">

    <a href="index.html" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse" class="back-button">Back</a>

    <p class="menu-label" align="center">
            <img src="images/biglogoreduced.png" class="menu-label-image" height="20" width="20">
        Data Monitor
    </p>


</div>
4

1 に答える 1

2

私はあなたに実用的な例を作りました：http：//jsfiddle.net/Gajotres/TRZjY/

「結果ウィンドウ」のサイズを変更して、違いを確認します。

@media all and (max-width: 300px) {
    h3.ui-title {
        margin: 40px 5% 0.8em !important;
        white-space: normal !important;
    }
}

タイトルに応じて、最大幅：300pxをニーズに合わせてカスタマイズします。また 、マージンを変更します：40px 5％0.8em！important; 。タイトルコンテナとしてh3タグを使用しているため、40pxのみを変更する必要があります。

于 2013-03-19T13:13:52.487 に答える