css - 垂直分组 Semantic-ui Labeled 按钮

Question

最近我开始使用 Semantic-ui，我遇到了一个问题，在尝试了多种方法之后，我似乎无法解决这个问题。

我遵循了在 Semantic-ui 文档中找到的实现垂直对齐按钮的说明:https://semantic-ui.com/elements/button.html

然而，我的情况有点不同。我想对出现在标签旁边的按钮进行垂直分组。

这些按钮的 HTML 部分如下:

<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>

结果如下:

尝试添加垂直分组容器时，水平对齐的按钮(标签)似乎也垂直放置:

<div class="ui vertical buttons">
    <div class="ui labeled button" tabindex="0">
        <div class="ui button">
            <i class="heart icon"></i> Like
        </div>
        <a class="ui basic label">
            2,048
        </a>
    </div>
    <div class="ui labeled button" tabindex="0">
        <div class="ui button">
            <i class="heart icon"></i> Like 2
        </div>
        <a class="ui basic label">
            1,121
        </a>
    </div>
</div>

结果:

我试图向包含按钮的 div 添加一个水平类，但这似乎不起作用。

知道如何使用 Semantic-ui 将按钮标签放置在最初的位置，但将单独的按钮 div's 保持在每个水獭下方(垂直)吗？

Answer 1

只用 vertical 包裹 div 中的第一个，而不是包裹它们两个。

<div class="vertical">
<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>
</div>
<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>

看这里: https://stackblitz.com/edit/semantic-ui-o68elx?file=app/app.component.html

查看输出: