Question

在JQuery Mobile中，我正在创建一个标题，其左侧对齐的Back按钮和标题对齐的中心。理想情况下，这两个元素应该在同一行中对齐，但是当出于空间原因，两个元素在同一行中无法容纳（特别是在描绘模式下）时，标题应该在“返回”按钮下方稍微向下移动。应该使用什么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>

Answer 1

我为你做了一个工作的例子：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！重要; 。你应该只改变40px，因为我使用h3标签作为标题容器。

在JQuery Mobile中动态向下移动标题中的元素

1 个答案: