jquery - 更改数据角色 ="header"中 .ui-title 的宽度

Question

我正在使用 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 样式(例如边距)的变通方法，可以解决 header 在某些设备上变得太宽的问题。我想这就是为什么标题这么小，以适合所有设备。我好几个小时都没有时间对此进行测试，所以我最终放弃并返回到默认布局，并确保标题足够窄。

Answer 1

使用此 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/