html - 垂直对齐 label-Element 中的 span-Element

Question

我有一个类似问题的问题: Vertical Align text in a Label

我的 HTML 结构如下所示:

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

我正在尝试将 span-element 垂直对齐到 label-Element 的顶部。

那是我的 css 代码:

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 到 span

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

JS Fiddle

尽管在这种情况下我建议您使用 div 而不是 label。 label 不适用于具有子元素。