如何根据文本行数添加行高

Question

请检查此jsfiddle。

我想要什么？

1. 如果.label中只有一行，则会将line-height: 30px;应用于与下一个输入字段垂直居中。
2. 如果.label中有多行，则会应用line-height: normal;

注意：

1. 我无法编辑HTML
2. 无法应用javascript或jQuery
3. 无法使用:first-child，:nth-child伪类，因为内容是动态的。
4. 我尝试使用.label{ display: table-cell;}，但由于.label已应用float，因此无效。我再次不喜欢使用table-cell。
5. .label:first-line无效/适用于此案例。

6. .label:before { content: ""; display: inline-block; height: 30px; vertical-align: middle; }

   不起作用。

HTML

<form>
    <label>
        <span class="label">Your Name</span>
        <input type="text" />
    </label>
    <label>
        <span class="label">Please Give Your Full Name</span>
        <input type="text" />
    </label>
</form>

CSS

form {
    float: left;
    width: 450px;
}
label {
    width: 100%;
    float: left;
    margin-bottom: 15px;
}
.label {
    width: 150px;
    float: left;
    clear: left;
    line-height: 30px;
}
input {
    width: 200px;
    float: right;
    clear: right;
    padding: 10px;
}
input {
    height: 10px;
    line-height: 10px;
}

Answer 1

好的，如果您从float移除.label这应该有用：

label {
    width: 100%;
    float: left;
    margin-bottom: 15px;
    line-height: 30px;
}
.label {
    width: 150px;
    line-height: normal;
    display: inline-block;
}

Fiddle

---

使用保证金的第一个解决方案

您可以尝试将margin-top添加到.label

.label {
    width: 150px;
    float: left;
    clear: left;
    margin-top: 6px;
}

我不确定这是你想要的，你可以查看这个fiddle