Semantic-UI 标签水平类型介绍

Semantic-UI 是一个优雅的前端框架，具有现代设计和清晰的文档，拥有强大且易于使用的标记语言。标签是 Semantic-UI 中非常重要的一部分，因为它们允许您以可读性强的方式描述内容，并将其分类。在本文中，我们将向您介绍 Semantic-UI 中的标签水平类型。

标签水平类型的作用是定义标签的宽度，有以下类型可供使用:

• default: 默认类型，标签的宽度自适应内容。
• horizontal: 水平类型，标签在一行内排列，均分宽度。
• left floated: 左浮动类型，标签靠左对齐，与周围的内容有间隔。
• right floated: 右浮动类型，标签靠右对齐，与周围的内容有间隔。

下面，我们通过一些代码示例来更好地理解和使用这些标签水平类型。

默认类型

默认类型的标签宽度将自适应其内容。

<div class="ui labeled icon buttons">
  <button class="ui button">
    <i class="thumbs up icon"></i>
    Like
  </button>
  <button class="ui button">
    <i class="thumbs down icon"></i>
    Dislike
  </button>
</div>

水平类型

水平标签在一行中均分宽度，每个标签之间有间隔。

<div class="ui horizontal segments">
  <div class="ui segment">Segment 1</div>
  <div class="ui segment">Segment 2</div>
  <div class="ui segment">Segment 3</div>
</div>

左浮动类型

左浮动类型的标签将靠左对齐，与周围的内容有间隔。

<div class="ui left floated label">Left Floated Label</div>

右浮动类型

右浮动类型的标签将靠右对齐，与周围的内容有间隔。

<div class="ui right floated label">Right Floated Label</div>

通过使用 Semantic-UI 的标签水平类型，您可以轻松地创建一些很酷的样式，让您的页面看起来更加清晰和易于理解。在使用标签水平类型时，请注意标记语言和相关的样式类。祝您使用愉快！