0

連絡先ページを書いていますが、奇妙な問題があります。入力とテキストエリアからすぐにクロスがあります。十字架を指すとテキストが表示されますが、それで問題ありません。十字を垂直方向の中央に配置したので、入力/テキストエリアの横の中央に表示されます。input / textareaとcrossをdivに設定しましたが、input divでは正常に機能しますが、inputdivよりも高いtextareadivでは、十字がではなく下部にあるという問題があります。途中で。何が問題なのか見てみましょう：http：//demo.wietsedev.nl/

<div>
    <input type="text" placeholder="Volledige naam" id="name" />
    <img src="cross.png" class="cross" />
</div>
<div>
    <input type="text" placeholder="Uw E-mail adres" id="email" />
    <img src="cross.png" class="cross" title="Dit E-mail adres bestaat niet" />
</div>
<div height="100px">
    <textarea placeholder="Uw bericht" id="message"></textarea>
    <img src="cross.png" class="cross" />
</div>

そして、これは十字架のスタイルです：

.cross {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin: 2px;
}

さらに詳しい情報が必要な場合は、ページのソースを参照してください。

4

3 に答える 3

1

非常に誤用されているcssスタイルであることが多いため、vertical-alignを誤って使用している可能性があります。

http://phrogz.net/css/vertical-align/index.html

于 2012-06-20T15:33:52.280 に答える
1

ここで実際にできることはたくさんありますが、おそらく最も単純なものの1つは、クロスクラスを右にフロートさせてトップマージンを追加することです。

.cross {
    height: 20px;
    width: 20px;
    margin: 2px;
    float: right;
    margin-top:0.6em;
}

編集：これはテキスト領域の中央に十字を配置しないことに注意してください。ただし、垂直方向の配置がブラウザの一貫性を欠く可能性があることを考慮すると、十字を真上に配置することも悪い呼び出しではない可能性があります。

于 2012-06-20T15:37:59.490 に答える
1

htmlからimgを削除し、CSSを介して配置します（実際にはプレゼンテーションです）。クラスを3番目のdivに配置し、次にこのスタイルを配置します。

.theDivClass {
padding-right: 40px; /*the img width + a little more */
background: url(pathtotheimg) no-repeat center right; /*Center right does the trick here*/
}

それが一番簡単な方法だと思います。

于 2012-06-20T15:47:20.067 に答える