Question

我正在尝试设置使用图像背景的基本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>

所有内容都按预期显示，但由于某种原因，我无法将“提交”按钮直接显示在文本字段下方;它一直出现在它旁边，在右边。

有关如何解决此问题的任何提示？

Answer 1

在CSS中，将display: block应用于提交按钮，或者 - 如果使用浮动布局 - clear: both。

这会将按钮渲染为流中的块级元素，从而产生所需的布局。

参考

Block-level elements on Mozilla Developer Network

Answer 2

Use a stylesheet。内联CSS会让你的眼睛流血。

执行此操作后，使按钮块级元素可能执行操作（取决于您所需的布局）：

form input[type="image"] {
  display: block;
}

Answer 3

<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>";
?>

如何使用CSS设置我的HTML表单样式

3 个答案:

参考