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 要素をターゲットにして、テキストエリアの上部に合わせて表示する方法はありますか? 理想的には、HTML を変更する必要はありません (これは ASP.NET MVC によって自動生成されるため)。

4

1 に答える 1

2

テキストエリアを左にフロート -

textarea {
  float:left;
}

新しいデモhttp://jsfiddle.net/kevinPHPkevin/wCVK2/1/

于 2013-04-11T19:20:59.937 に答える