水平对齐破折号清单标签答案

【问题标题】：Horizontal aligning dash checklist label水平对齐破折号清单标签
【发布时间】：2023-04-01 23:45:01
【问题描述】：

如何将复选框的标签设置在复选框的左侧，而不是使用 plotly dash 设置在右侧？在 Excel (VBA) 中，“水平对齐”变量允许您相对于复选框以不同的方式放置标签，但我似乎找不到 Dash 的类似选项。

This is what I get

But this is what I want

【问题讨论】：

标签： python css plotly-dash

【解决方案1】：

您始终可以将 input 和 labels 包装到 div 中，在其中创建父类 position: relative，然后将输入和标签设为 position: absolute

示例 HTML：

<div>
    <form class="formclass">
        <div class="inputContainer">
            <input class="inputClass" type="checkbox"></input>
            <label class="labelClass">Label1</label>
        </div>
        <div class="inputContainer">
            <input class="inputClass" type="checkbox"></input>
            <label class="labelClass">Label2</label>
        </div>
        <div class="inputContainer">
            <input class="inputClass" type="checkbox"></input>
            <label class="labelClass">Label3</label>
        </div>
    </form>
</div>

示例 CSS：

.inputContainer{
     position:relative;
     height: 50px;
     width: 80px;
}
.labelClass{
     position: absolute;
 }
.inputClass{
     position: absolute;
     right: 0;
 }

【讨论】：