html - 彼此相邻的样式复选框和 anchor 标记

Question

我有一个复选框，然后我有一个显示一些文本的 anchor 标记，然后会有一个 V 形按钮来向上或向下切换。目前，我的复选框和 anchor 标记位于不同的行上，我希望将我的 anchor 标记放在复选框旁边。我如何设计以下代码以使其成为可能。

<header class="refine-menu-subheader" style="display: flex; flex-direction: row; align-items: baseline;">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"
                                   [checked]="item.isActive"
                                   (change)="">
                            <span class="text-body"></span>
                        </label>
                    </div>
                    <a class="refine-menu-collapse" style="display: flex; flex-direction: row; align-items: baseline;" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id">
                        <h3 class="refine-menu-subtitle">{{item.name}}</h3>
                        <span class="win-icon refine-menu-icon"></span>
                    </a>
                </header>

Answer 1

您可以很容易地使用 Flex 来实现这一点。您所需要的只是 align-items: baseline; 使元素的基线居中。 flex-direction: row; 是默认方向，但我把它留在那儿所以不会混淆。

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

<header class="refine-menu-subheader">
  <div class="checkbox">
    <label>
      <input type="checkbox" 
             [checked]="item.isActive" 
             (change)="">
      <span class="text-body"></span>
    </label>
  </div>

  <a class="refine-menu-collapse" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" [attr.aria-controls]="item.id" [attr.data-target]="'#'+item.id">
    <h3 class="refine-menu-subtitle">{{item.name}}</h3>
    <span class="win-icon refine-menu-icon"></span>
  </a>
</header>