如何使用CSS设置HTML表单的样式
[英]How to style my HTML form using CSS
问题描述
I am trying to style a basic HTML form that uses an image background: 
我正在尝试设置使用图像背景的基本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>
All is looking as expected, except, for some reason, I can't get the Submit button to appear directly underneath the text field; 一切都按预期进行，但由于某种原因，我无法使“提交”按钮直接出现在文本字段的下面； it keeps appearing next to it, on the right. 它一直显示在它的右边。
Any tips on how to fix this? 有关如何解决此问题的任何提示？
3 个解决方案
解决方案1
4 已采纳 2012-06-10 08:55:16
In the CSS, apply display: block to the submit button, or - if using floats for layout - clear: both . 在CSS中，将display: block应用于Submit按钮，或者-如果使用浮点数进行布局clear: both 。
This will render the button as a block level element in the flow, resulting in the desired layout. 这会将按钮呈现为流中的块级元素，从而得到所需的布局。
Reference 参考
解决方案2
1 2012-06-10 08:56:37
Use a stylesheet . 使用样式表 。 Inline CSS will make your eyes bleed. 内联CSS会让您流血。
After you do this, making the buttons block-level elements might do the trick (depending on your desired layout): 完成此操作后，使按钮成为块级元素可能会成功 （取决于所需的布局）：
form input[type="image"] {
display: block;
}
解决方案3
0 2012-06-10 13:31:07
<html>
<style>
--your style--
</style>
<body>
<form>
--your class--
</form>
</body>
</html>
like this(for shadow text php): 像这样（对于阴影文本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>";
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.