Question

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

<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>

Answer 2

您可以将.checkbox和.refine-menu-collapse都设置为display: inline-block，这应该足以满足您的需求。将它们包装在div中可能是一个好主意，但这会导致对它周围的其他元素产生一些意外行为。

样式复选框和锚标签彼此相邻

2 个答案: