如何对齐比例描述？答案

【问题标题】：How to align scale descriptions?如何对齐比例描述？
【发布时间】：2020-12-20 19:16:35
【问题描述】：

在下图中，我将低和高比例描述与第一个和第七个选项对齐。我通过尝试在包含比例描述的行上创建样式与比例尽可能匹配的元素，然后将“低”和“高”居中在它们各自的数字上，从而在引导程序中做到了这一点。

很遗憾，您可以看到“高”的对齐方式不如我所愿。虽然我可以针对一种屏幕尺寸解决此问题，但它不适用于其他屏幕尺寸。当然，我可以提出专门的样式来解释所有断点，但我确实需要一个更通用的解决方案，因为我最终需要有更多的描述，而不仅仅是两个。而且我可能需要将它们错开两行。

我对任何解决方案持开放态度，但对我来说最直接的解决方案是我可以简单地计算 javscript/jQuery 中的绝对位置。采取第一个选项并找到它在两个轴上的中心，然后从中减去以找到我要放置的文本的中心。那我从那里不确定......我可能需要实际找到显示描述的宽度，然后减去一半？

在我写这篇文章的时候，我突然想到，因为我使用的是引导程序，也许我可以动态调整父元素上的类以覆盖与选项相同的列数（在本例中为 7）。也许这是最好的解决方案？我想在我写完这个问题后我会去尝试......但因为这可能不是最好的答案，而且因为我觉得我已经花了足够的时间/精力，所以我仍然会发布我的问题以防有更好的答案！

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

我不知道这些圆圈指示器应该有多灵活，但也许这样的东西可以帮助你：

<style>
    .circle-row {
        margin-top: 20px; /*needed for label*/
    }
    .circle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 1px solid blue;
        border-radius: 50%;
    }
    .circle:not(:first-child) {
        margin-left: 20px;
    }
    .circle-row .circle:first-child:after,
    .circle-row .circle:last-child:after {
        position: absolute;
        width: 100px;
        text-align: center;
        top: -20px; /*needed for label*/
        left: 50%;
        transform: translateX(-50%);
        word-break: keep-all;
    }
    .circle-row .circle:first-child:after {
        content: 'low';
    }
    .circle-row .circle:last-child:after {
        content: 'high long label';
    }
</style>

<div class="circle-row">
    <div class="circle"><span>1</span></div>
    <div class="circle"><span>2</span></div>
    <div class="circle"><span>3</span></div>
    <div class="circle"><span>4</span></div>
    <div class="circle"><span>5</span></div>
    <div class="circle"><span>6</span></div>
</div>

这是一个 JSFiddle：http://jsfiddle.net/0foyL3g1/

通过这个 CSS，我们将标签注入到第一个和最后一个圆圈。标签是绝对定位的，所以如果我们希望标签比 .circle (20px) 宽，我们添加固定宽度 (100px)。

【讨论】：