0

これが私が持っているものです：

#nameDiv
{
    height: 0px;
    width: 20px;
    position: relative;
    top: -22px;
    left: 134px;
}

#nameDivDuplicate
{
    height: 0px;
    position: relative;
    top: -22px;
    left: 134px;
    width: 20px;
}

そして私の見解では：

<tr>
    <td><b>Name:</b> </td><td><input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
    </td>
    <td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

nameDivとnameDivDuplicatedivには、最初はsidplay：noneがあります。次に、jqueryでそれらを表示します。txtName（右側）と同じ場所に表示する必要があります。

上記のコードはGoogleChromeには適していますが、他のブラウザには適していません。これはどのように処理されますか？

4

2 に答える 2

1

position:relativeは、と組み合わせて使用​​することになっていますposition:absolute。ここposition:relativeで、親要素では、絶対位置にある子要素の原点を設定しています。

あなたはそれをこのように使っていません。

于 2012-05-22T17:59:02.893 に答える
0

あなたはposition：relativeに本当に注意しなければなりません。それは本当にあなたにいくつかの頭痛を与える可能性があります。position：relativeには（特にIEで）多くの問題があります。

この場合は使用しないことをお勧めします。むしろ、2つのエラー画像の周りに追加のtdタグを配置して、独自の列を作成させます。これにより、txtNameの入力ボックスの右側に配置されます。

<tr>
<td><b>Name:</b> </td>
<td><input type="text" id="txtName" maxlength="100"/></td>
<td>
    <div id="nameDiv"  title="The Name is required.">
       <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
       <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
</td>
<td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

編集：新しい列は必要ないと言ったので、そのtdタグ内のすべての周りにdivタグを追加し、float：leftを使用してすべてを揃えるか、幅を設定できます。

#nameDiv { width: 20px; float:left; }
#nameDivDuplicate { float:left; }
#txtName { float:left; }

追加した新しいDIVを太字にしました。

<td><b>Name:</b> </td>
<td>
  **<div>**<input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" 
             id="txtNameDuplicate"/>
    </div>
  **</div>**
</td>
<td>Address: </td>
<td><input type="text" id="txtAddress"  maxlength="100"/> </td>
于 2012-05-22T18:22:05.063 に答える