离子怪异间距答案

【问题标题】：Ionic weird spacing离子怪异间距
【发布时间】：2016-02-17 12:21:19
【问题描述】：

当我使用以下代码显示标题时，title 会出现奇怪的左/右样式。

有人知道它有什么问题吗？谢谢！

<ion-header-bar>
    <h1 class="title">BLE Demo</h1>
    <button class="button button-positive">
        {{connectStatus == false ? "Connect" : "Disconnect" }}
    </button>
</ion-header-bar>

如果我将{{connectStatus == false ? "Connect" : "Disconnect" }} 行更改为{{connectStatus}}，那么样式就会消失。

更新：查看@Microsmsm制作的示例代码：http://codepen.io/Microsmsm/pen/ZQZyVp

【问题讨论】：

想要的布局是什么？没有right 属性的按钮？
<ion-header-bar> 中的 align-title 属性在 ionic 中设置标题的对齐方式。像<ion-header-bar align-title="center"> 这样的东西用于居中。 left 或 right 也是可用的值。
问题出现在标题上：当按钮元素中有{{connectStatus == false ? "Connect" : "Disconnect" }}而不是{{connectStatus}}时，
元素得到了“正确”的样式，
我认为这不是角度问题。您可以将您的页面上传到互联网。检查您的 CSS 样式。
您可以查看@Microsmsm codepen.io/Microsmsm/pen/ZQZyVp制作的这个，这不是CSS问题，因为左/右样式是直接添加到元素中的。

标签： css ionic-framework

【解决方案1】：

您可以使用代码as that。你变了

{{connectStatus == false ? "Connect" : "Disconnect" }}

到

{{connectStatus == true ? "Connect" : "Disconnect" }}

完成你的效果

【讨论】：

比较你的草图和这个：codepen.io/anon/pen/pgBrre，你可以看到
元素在你创建的那个中有一个奇怪的左/右样式。删除它的唯一方法是将{{connectStatus == false ? "Connect" : "Disconnect" }} 更改为{{connectStatus}}

【解决方案2】：

我按照标准空白模板解决了这个问题。使用 ion-nav-bar，而不是自己指定 h1 元素。

显然 ionic 试图通过向元素添加左/右样式来使标题居中，具体取决于其他元素（本例中的按钮）到左/右的宽度。但是计算的方式很奇怪，不是取决于实际显示了多少内容，而是取决于模板脚本的长度。

所以在这种情况下{{connectStatus == false ? "Connect" : "Disconnect" }} 比{{connectStatus}} 长得多，并且 ionic 为前者提供左右 333px 的空间，为后者提供 124px 的空间。即使显示的文本量差别不大。

不确定是否有办法解决这个问题。我会暂时坚持使用 ion-nav-bar。

【讨论】：

元素得到了“正确”的样式，

元素在你创建的那个中有一个奇怪的左/右样式。删除它的唯一方法是将{{connectStatus == false ? "Connect" : "Disconnect" }} 更改为{{connectStatus}}

元素在你创建的那个中有一个奇怪的左/右样式。删除它的唯一方法是将`{{connectStatus == false ? "Connect" : "Disconnect" }}` 更改为`{{connectStatus}}`