Semantic-UI 项宽松变化

在 Semantic-UI 中，您可以设置项目列表或菜单的项之间的间距。这种间距称为“项宽松”。默认情况下，项宽松为 0。

您可以通过为类名添加“[size] relaxed”（其中 [size] 是指您想要的项目大小——“small”、“large”、“huge”等）来设置项目列表或菜单项的项宽松。例如，如果您想要“大”（large）的项目宽松，请将类名设置为“ui large relaxed list”或“ui large relaxed menu”。

若想自定义项宽松，则可以通过CSS样式表进行更改。在CSS样式表中，您可以为列表、菜单或项目所在容器设置“padding-top”和“padding-bottom”属性来增加项宽松。例如，“.my-list {padding-top: 10px; padding-bottom: 10px;}”。

示例

以下是一个使用 Semantic-UI 的基本项目列表（ul 元素）的示例，其中包含四个项目，每个项目之间都有 1em 的项宽松。

<ul class="ui relaxed list">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
</ul>

以下是一个使用 Semantic-UI 的基本菜单（div 元素）的示例，其中包含四个菜单项，每个菜单项之间都有 0.5em 的项宽松。

<div class="ui relaxed menu">
  <a class="item">菜单项 1</a>
  <a class="item">菜单项 2</a>
  <a class="item">菜单项 3</a>
  <a class="item">菜单项 4</a>
</div>

总结

Semantic-UI 中的项宽松为控制项目列表或菜单项之间的间距提供了便利的方法。您可以轻松地设置标准的项宽松（例如“small”、“large”、“huge”等），也可以通过自定义CSS样式表进行更改。