2

フォーム内の一連のフィールドにいくつかのマークアップがあります。

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

そしてそれらを配置するためのいくつかのCSS：

*{
    position: relative;
}

span{
    position: relative;
    display: inline-block;

}

input{
    float:left;
}

label{
    float:left;
    margin-top: 15px;
    left: 70px;
}

li > ul{
    margin-left: -100px;
    max-width: 400px;
    display: inline-block;
}


li > label{
    float: left;
    vertical-align: top;
    margin: 0;
    left: 0;
    width: 120px;
    display: inline-block;
}

これにより、このレイアウトが作成されます。これは、必要なものに最適です。 ここに画像の説明を入力してください

問題：特定のフィールドが正しく入力されていない場合、システムはエラーメッセージを生成し、次のようなマークアップが発生します。

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

これにより、次のようになります。

ここに画像の説明を入力してください

代わりに、エラーメッセージを次のように表示したいと思います。

ここに画像の説明を入力してください

スパン内のラベルを絶対に配置してから、スパンの下部に揃えてみました。ただし、何らかの理由で、ラベルに。を付けても、入力されたテキストと常に重なっていますmargin-top。

エラーメッセージが挿入されたときに、フォームを目的のレイアウトのようにするにはどうすればよいですか？

4

3 に答える 3

1

エラーメッセージが表示されているかどうかに関係なく、テキスト入力の下にラベルが一貫して表示されるようにするには、次の方法をお勧めします。

  1. スパンの下部にラベルを配置します。
  2. 入力の下部にマージンを追加して、ラベルを含めるのに十分な大きさのスパンを拡大します。

テクニックを説明するための縮小例を次に示します。

HTML：

  <span>
      <label>some label</label>
      <div class="error">some error message.</div>
      <input type="text" value="a" size="35" maxlength="35">
  </span>

CSS：

span{
  display: block;
  position: relative;
}

label {
  position: absolute;
  bottom: 0px;
}

input {
  margin-bottom: 20px;
}

http://jsfiddle.net/fuEqB/

于 2012-06-15T02:56:50.977 に答える
0

float leftを使用して、htmlの要素を再配置するだけです。

ul {
    padding: 0;
}

li {
    display: block;
}

.form-label {
    float: left;
    padding-right: 20px;
}

label {
    display: block;
}

ul ul {
    float: left;
}

.error {
    color: red;
}

http://jsfiddle.net/ysv8E/embedded/result/

于 2012-06-15T01:36:33.123 に答える
0

私がこれを正しく読んでいるかどうかはわかりませんが...

絶対位置の要素は通常のフローレイアウトの一部ではないため、margin-topはposition：absoluteの分離された要素では機能しません。上マージンには何の影響もありません。

また、position：absoluteの要素は、通常のフローレイアウトで余分な垂直方向のスペースが使用されることはありません。そのため、入力の下ではなく上に表示されます。

position：absoluteを使用する必要がある場合は、レイアウトに追加の垂直スペースを追加するための別の方法を調整する必要があります。CSSを使用すると、position：absoluteを持たない非表示の要素を非表示にして表示したり（エラーメッセージの表示と非表示に加えて）、エラーメッセージの表示中に各フォーム要素間のマージンまたはパディングを増やすことができます。しかし、おそらくそれを行うためのより簡単な方法があります（絶対位置の使用が少なくなります）。

于 2012-06-15T02:42:52.647 に答える