0

画像の背景を使用する基本的な HTML フォームのスタイルを設定しようとしています。

<form style="
    background:url(http://moneythink.org/wp-content/uploads/2012/06/Moneythink-Newsletter-Signup-Background.jpg) no-repeat; 
    padding:90px 0px 60px 122px;">
    <input type="email" value="Email" name="EMAIL" 
        class="required email" id="mce-EMAIL" 
        style="width: 100px;" style="padding-bottom: 5px;"> 
    <input type="image" src="http://moneythink.org/wp-content/uploads/2012/06/Submit-Button.jpg" 
        alt="Submit button" style=" padding-left: 57px; padding-bottom: -40px;" 
        name="subscribe" id="mc-embedded-subscribe">
</form>

なんらかの理由で、テキスト フィールドのすぐ下に [送信] ボタンが表示されないことを除いて、すべてが期待どおりに見えます。右側の隣に表示され続けます。

これを修正する方法に関するヒントはありますか？

4

3 に答える 3

4

CSS ではdisplay: block、送信ボタンに適用するか、または - レイアウトにフロートを使用している場合 -に適用しますclear: both。

これにより、ボタンがフロー内のブロック レベル要素としてレンダリングされ、目的のレイアウトが得られます。

参照

于 2012-06-10T08:55:16.050 に答える
1

スタイルシートを使用します。インライン CSS は目を充血させます。

これを行った後、ボタンをブロックレベルの要素にすることでうまくいくかもしれません (希望するレイアウトによって異なります):

form input[type="image"] {
  display: block;
}
于 2012-06-10T08:56:37.787 に答える
0 
<html>

<style>
--your style--  
</style>

<body>
<form>
 --your class-- 
</form>
</body>

</html>

このように（シャドウテキストphpの場合）：

<?php

echo "<html>";
echo "<head>";

echo "<style>";

echo '.inner_text_shadow{text-shadow: 1px 1px white, -1px -1px #444;}';
echo '.default{font-size:30px;color: darkred;font-weight:bold;}';
echo '</style>';
echo '<body>   <p class="inner_text_shadow default">FreeClup Best Code</p></body>';
echo "</html>";
?>
于 2012-06-10T13:31:07.563 に答える