0

テキストボックスの横にラベルが付いたフォームがあるという点で、比較的簡単な設定になっています。検証チェックが失敗しない限り非表示になっている画像もあります。検証チェック前は次のようになります。

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

検証チェックが失敗した場合は、次のようになります。

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

最初の画像でわかるように、ラベルとテキストボックスは適切に配置されています。ただし、2つ目では、テキストボックスが約10px押し下げられているように見えます。

ここに問題があります。私はこの問題を解決するために多くの修正を試みましたが、すべてをそのままの状態に保つことができます（そして整列することができます）。

HTMLコードは次のとおりです。

<ol class="forms">
    <li>
        <label for="Name">Name*</label>
        <input type="text" name="name" id="Name" />
        <img src="/Graphics/Other/Name-Alert.png" class="validateImage" id="Name-Image-Validation">
    </li>
...
...

対応するCSSコードは次のとおりです。

form ol { list-style-type:none; }

form    { text-align:left; margin:0px;  }

label   { 
        float: left; width: 85px; margin-top:5px;
        text-align:left; display:block; background:none;
        }

input   { 
        width: 250px; margin:0 0 16px 10px;
        border:1px #bbb solid; padding:5px; background:none; color:#FFF;
        }

select { margin-bottom:20px; }

.clear  { clear:both; }

.validateImage  { display:none; }

最後に、フォームを検証するために使用するJavaScriptの小さな部分を次に示します。

var x=document.forms["email_form"]["name"].value;
if (x==null || x=="")
{
    document.getElementById('Name-Image-Validation').style.display='inline';
    return false;
}
else
{
    document.getElementById('Name-Image-Validation').style.display='none';
}

誰かがこの問題を解決するのを手伝ってもらえますか？

4

2 に答える 2

3

これは、デフォルトでimgタグが上に配置されているためです。これを試してください。

.validateImage  { display:none; vertical-align: middle; }
于 2012-05-25T10:42:36.433 に答える
0

受け入れるものがあるように：

追加してみましたか#Name-Image-Validation { position:relative; top:10px }

于 2012-05-25T10:32:28.820 に答える