垂直分组语义用户界面标记的按钮

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中添加一个水平类，但这似乎不起作用。

有人知道我如何才能将按钮标签放置在最初的位置，但是如何使用div's将单独的按钮Semantic-ui保持在每个水獭下方（垂直）？

Answer 1

仅将div中的第一个与vertical一起包装，而不是将它们都包装。

<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

查看输出：