html - 如何在彼此下方垂直对齐按钮

Question

我有一些按钮“带有信息图标的按钮，我想对齐它们以便垂直排列在彼此下方

image_1 显示了按钮的当前对齐方式。

请让我知道如何使用 CSS 和 HTML 将它们垂直对齐

我想从复选框开始向左侧设置相等的边距，但我不知道该怎么做

HTML 标记：

<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGGREGATED_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
                        
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGRICULTURAÖ_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>                       
                            
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_WATER_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>

img_1：

标签： htmlcss

Answer 1

从图像我假设盒子有一个固定的宽度。您可以将此用作限制并span在文本和按钮之间添加内联，并设置其宽度以填充剩余的可用空间。那应该将按钮推到右侧。