OStack程序员社区-中国程序员成长平台

标题: javascript - 等水平间距 3 个标签 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 14:01
标题: javascript - 等水平间距 3 个标签

我目前正在 Appcelerator Titanium 中编写应用程序。我有三个标签要水平均匀分布。

这是一个例子

Label 1     |     Label 2

中间的标签始终是条形，但其他两个标签的大小会有所不同。现在，我将 View 中的条和第二个标签附加到屏幕右侧，第一个标签附加到左侧，但如果左侧标签相当小，这看起来很糟糕。

我不能将它们全部放在一个文本字段中，因为中间标签的样式不同。

如何正确布置这些元素，使它们在水平方向上均匀分布？

---

Best Answer-推荐答案

有几个选项，但一个快速的选项是使用 StyledLabel这就像一个非常轻量级的 webview 版本，它允许您使用 HTML/CSS 呈现文本，这可以让您将标签合并到一个标签中，例如:

var StyledLabel = require('ti.styledlabel');
var label = StyledLabel.createLabel({
    height: Ti.UI.SIZE || 'auto', 
    html: '<span>Label 1</span>     |     <span>Label 2</span>'
});

您可以使用自定义 CSS 编辑 span 标记以满足您的需要。

或者，尝试使用百分比布局并小心使用 textAlignment 属性。

var container = Ti.UI.createView({width : "100%", layout: "horizontal" });
var label1 = Ti.UI.createLabel({
    text: "Label 1",
    width : "33%",
    textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT
});
var label2 = Ti.UI.createLabel({
    text: "|",
    width : "33%",
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER
});
var label3 = Ti.UI.createLabel({
    text: "Label 2",
    width : "33%"
    textAlign : Ti.UI.TEXT_ALIGNMENT_RIGHT
});
container.add(label1);
container.add(label2);
container.add(label3);

关于javascript - 等水平间距 3 个标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18579933/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4