Html 如何使复选框标签中的拆分文本垂直对齐？

为这个模糊的标题道歉，但这很难描述。我使用span标记在复选框标签中的文本之间放置空格，但我希望文本的两部分垂直排列。基本上我需要第二个空格键。下面的代码段正确地显示了左对齐的蓝色文本。但我也希望红色文本左对齐。你可以看到它现在有点参差不齐。有人知道怎么做吗

.LHLabelClass{
显示：内联块；
颜色：蓝色；
左边距：10px；
右边距：35px；
}
RHLabelClass{
颜色：红色；
}

第一个左侧标签：第一个右侧标签


第二个左侧标签：第二个右侧标签


第三个左侧标签：第三个右侧标签

这是我使用

内联块的解决方案

：

*{框大小：边框框；}
.LHLabelClass{
颜色：蓝色；
左边距：10px；
右边距：35px；
宽度：120px；
显示：内联块；
}
RHLabelClass{
颜色：红色；
宽度：120px；
显示：内联块；
}

第一个左侧标签：
第一个右标签


第二个左侧标签：
第二个右标签


第三个左标签：
第三个右标签

如果

flexbox

是一个选项，您可以将

标签

s设置为一个

flexbox

宽度，然后将

flex:1

添加到

span

s中-参见下面的演示：

.LHLabelClass{
显示：内联块；
颜色：蓝色；
左边距：10px；
右边距：35px；
}
RHLabelClass{
颜色：红色；
}
标签{
显示器：flex；
宽度：300px；
}
标签>*{
弹性：1；
}
标签>输入[类型=复选框]{
flex：首字母；
}

第一个左侧标签：第一个右侧标签


第二个左侧标签：第二个右侧标签


第三个左侧标签：第三个右侧标签

您只需向div添加一些对齐类，并控制文本对齐方式：

.LHLabelClass{
颜色：蓝色；
}
RHLabelClass{
颜色：红色；
左边距：10px；
}
上校{
浮动：左；
宽度：150px；
}
.左{
文本对齐：左对齐；
}

第一个左侧标签：


第二个左侧标签：


第三个左标签：
第一个右标签


第二个右标签


第三个右标签

类似的东西？Chemata是一个我从未想到的非常优雅的解决方案！其他的都可以，但我接受你的简单。我本来会投chazsolo的票，但我认为首先需要明确代码。非常感谢大家。