如何在 nativescript 中使 Label 元素内联？答案

【问题标题】：How to make Label element inline in nativescript?如何在 nativescript 中使 Label 元素内联？
【发布时间】：2019-04-23 13:43:32
【问题描述】：

我有 HTML 我想将border-bottom 属性赋予<Label> 元素，它是<StackLayout> 的子元素。

我的问题是border-bottom 像网络中的div 一样占据全宽。我希望这个 Label 元素像 span 一样内联，因此它的宽度不应超过其内容宽度。

    <StackLayout *ngIf="!places.length">
       <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
         borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
    </StackLayout>

下面是我现在得到的布局。但我不希望那条橙色线是端到端的。相反，它的宽度应始终等于该标签内的文本。

【问题讨论】：

标签： android-layout nativescript

【解决方案1】：

您可以使用带有justifyContent="center" 的FlexboxLayout，而不是StackLayout。


<FlexboxLayout justifyContent="center" *ngIf="!places.length">
  <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b- 
   5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All 
   Activities"> . 
  </Label>
</FlexboxLayout>

【讨论】：

【解决方案2】：

尝试将标签上的horizontalAlignment 设置为center

<Label horizontalAlignment="center" ...

【讨论】：

【解决方案3】：

将horizontalAlignment="center" 添加到标签中。这将使组件居中，使其只有所需的大小。

示例游乐场：https://play.nativescript.org/?template=play-vue&id=8kZUFY

【讨论】：