0

我正在尝试为我的 ASP.NET MVC 3 应用程序生成的表单 HTML 设置样式。使用默认样式，标签堆叠在输入控件的顶部，如下所示：

在此处输入图像描述

我已经更改了 css，使标签位于输入控件的左侧，如下所示：

在此处输入图像描述

但是，当输入控件是文本区域并且显示验证消息时，我遇到了问题：

在此处输入图像描述

如您所见，验证消息与文本区域的底部对齐。我希望它与文本区域的顶部对齐。

这是 MVC 脚手架生成的 HTML 的一个很好的近似值（结构相同，但我省略了一些 HTML 属性）：

<Fieldset>
    <Legend>Form Title</Legend>

    <div class="editor-label">
        <label>Town / City</Label>
    </div>

    <div class="editor-field">
        <textArea></textArea>
        <span class="field-validation-error">
            <span>The town / city field is required</span>
        </span>
    </div>

</Fieldset>

这是我目前的CSS：

.editor-label {
    margin: .8em 0 0 .5em;
    clear: left;
    float:left;
    width: 160px;
}

.editor-field {
    margin: .5em 0 0 0;
    float: left;
}

我尝试添加一个样式，该样式以<span>和 的类为目标field-validation-error，并将<textarea>其display属性设置为，inline-block但这不会改变验证错误的显示方式。

.field-validation-error {
    color: #FF0000;
    display: inline-block;
}

textarea {
    font: inherit;
    min-height: 75px;
    display: inline-block;
}

有没有办法定位 span 元素并与 textarea 的顶部对齐显示？理想情况下，我不想更改 HTML（因为这是由 ASP.NET MVC 自动生成的）。

4

1 回答 1

2

将文本区域浮动到左侧 -

textarea {
  float:left;
}

新演示http://jsfiddle.net/kevinPHPkevin/wCVK2/1/

于 2013-04-11T19:20:59.937 回答