标签元素中的垂直对齐跨度元素答案

【问题标题】：Vertical align span-Element in label-Element标签元素中的垂直对齐跨度元素
【发布时间】：2013-07-11 19:07:22
【问题描述】：

我对这个问题有类似的问题： Vertical Align text in a Label

我的 HTML 结构如下所示：

<label>
    <span>Comment:</span>
    <textarea>Some Default-Text</textarea>
</label>

我正在尝试将跨度元素垂直对齐到标签元素的顶部。

这是我的 css 代码：

label{
    display: block;
}

label span{
    display: inline-block;
    width: 30%;
}

.createForm textarea{
    width: 67.7%;
    resize: vertical;
}

我已经尝试将 label-tag 的显示设置为 inline-block 并添加 vertical-align 属性，但没有任何反应。

有人知道这个问题的原因吗？

【问题讨论】：

你是说你已经试过了，但你确定你加了vertical-align: top吗？它似乎只适用于它：jsfiddle.net/acdcjunior/XE5Fy
@acdcjunior 我将 align 放在标签元素中，但没有用 :( 不知道为什么我没有考虑将它放入跨度元素 ashame

标签： html css

【解决方案1】：

将vertical-align:top 添加到跨度

label span{
    display: inline-block;
    width: 30%;
    vertical-align:top;
}

JS Fiddle

虽然我建议你在这种情况下使用div 而不是label。 label 不适合拥有子元素。

【讨论】：