3

我正在使用 Jquery Mobile 开发一个网站。我的标题对齐菜单的中心，如上图所示：

页面标题居中对齐，带有绿色边框

我的绿色边框 CSS 是：

.ui-title 
{
    border: 2px solid lime;
}

和 HTML：

<div data-role="header" data-position="fixed" class="menu">
    <a href="#" data-icon="home" data-theme="a">Home</a>
    <h1>Title</h1>
</div>

我想要的是跨越全宽的标题（相对于窗口的当前宽度），但仍然居中，如下图中的粉红色线条：

页面标题居中对齐，绿色边框和粉色线条描述目标宽度

知道如何在不破坏 Jquery Mobile 布局（例如不同目标设备的设备宽度）的情况下实现这一点吗？

解决方案：

margin-right: 1% !important;
margin-left: 1% !important;

它似乎在我的情况下工作（即使如果窗口足够小，标题也会在按钮后面）。

更新：

没有解决周围 div 或更改 CSS 样式（例如边距）的方法，解决了某些设备上标题过宽的问题。我想这就是为什么标题如此之小，以适合所有设备的原因。我几个小时都没有时间测试这个，所以我最终放弃了，回到了默认布局，只是确保标题足够窄。

4

3 回答 3

3

使用这个 css 并设置你的左右百分比（将 10% 更改为任何其他数字）

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

如果您想在不同方面使用不同的值，请使用此 css：

.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

此外，如果可能的话，给每个标题一个 id，因为提到的 css 将使用 .ui-title 类更改每个元素。

这是一个例子：http: //jsfiddle.net/Gajotres/QP9qm/2/

于 2013-01-31T10:11:35.300 回答
0

将标题或 ui-title 设置为：

 .post .ui-header .ui-title {
  margin:0;
  width:100%;

  }

它应该这样工作。

于 2013-01-31T10:22:44.480 回答
0

为什么你会期望没有 div 或 css 的解决方法？那有什么问题呢？

选项 1：复制他们在 JqueryMobile.com 上所做的事情

无论如何，这就是他们在实际的 jQuery Mobile 网站 (1.4.2) 上的做法。我无法评论 2013 年 1 月 jQuery mobile 的状态。

<div data-role="header" class="jqm-header">
    <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
    <p><span class="jqm-version"></span> Demos</p>
    <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
    <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div>

.ui-title（这是 h2 自动增强的）的默认样式表如下。您会看到，这就是margin: 0 30%导致您出现问题的原因。

ui-header .ui-title, .ui-footer .ui-title 
{
   font-size: 1em;
   min-height: 1.1em;
   text-align: center;
   display: block;
   margin: 0 30%;
   padding: .7em 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   outline: 0!important;
}

在他们的覆盖样式表中

.jqm-demos .jqm-header h2 
{
   padding: .4em 0 .1em;
   margin: 0 3em;
}

添加此覆盖足以使我的徽标居中。

（可能有另一种方法可以做到这一点，data-enhance='false'但这并没有

选项 2：禁用自动增强

您可以禁用自动增强以防止ui-title首先应用该类并破坏您的 CSS。还有其他副作用，例如其他按钮配置不正确，我不推荐这种方式，但很高兴了解此功能可能适用于其他地方。

首先你必须设置

$.mobile.ignoreContentEnabled = true;

注意：您必须mobileinit在加载 jQueryMobile 之前对其进行配置。像这样或者你想怎么做。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
    $(document).on('mobileinit', function () {
        alert("ignoreContentEnabled initial value = " +$.mobile.ignoreContentEnabled);
        $.mobile.ignoreContentEnabled = true;
    });
</script>

<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>

然后将标题更新为

<div data-role="header" id="defenderHeader" data-enhance="false">

它里面的任何东西都不会自动增强。<h2>不幸的是，如果你把它放在我最初想做的事情上，这不起作用。您可以进一步探索此选项，但我认为选项 1 是最好和最简单的。

另请参阅：http ://api.jquerymobile.com/global-config/

于 2014-04-10T01:48:42.697 回答