如何在本地脚本中使Label元素内联？

Question

我有 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>

下面是我现在得到的布局。但是我不希望那条橙色的线首尾相连。相反，其宽度应始终等于该Label内的文本。

Answer 1

您可以将 FlexboxLayout 与justifyContent="center"一起使用，而不是 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>

Answer 2

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

<Label horizontalAlignment="center" ... 

Answer 3

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

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