垂直对齐span - 标签元素中的元素

Question

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

我的HTML-Structure看起来像这样：

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

我正在尝试将span-element垂直对齐到标签元素的顶部。

那是我的css-Code：

label{
    display: block;
}

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

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

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

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

Answer 1

将vertical-align:top添加到范围

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

JS Fiddle

虽然我建议您在这种情况下使用div代替label。 label并不意味着拥有子元素。