表单和 div html 元素的默认 css 参数

Posted 2023-04-14

【中文标题】表单和 div html 元素的默认 css 参数

【英文标题】：default css parameters for form and div html elements

【发布时间】：2013-06-15 17:34:10

【问题描述】：

快速提问：

我正在尝试重新设计一个 mailchimp 弹出窗口。有一个以文档为中心的表单元素，我想将其转换为 div 元素（只需将“form”替换为“div”）。问题是当我这样做时，它不再居中。

显然这两个元素的默认 css 存在差异，它们是什么？

这不是“显示：块”

谢谢

   <style type="text/css">
        #mc_embed_signupposition:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); z-index:10000; 
        #mc_embed_signup formposition:fixed; top:10%; left:50%; width:50%; margin-left:-17%; font:normal 100% Helvetica,Arial,sans-serif; font-size:14px; border-radius:4px; border:none; padding:0; background-color:#fff; color:#000; text-align:left; overflow-y:auto; overflow-x:hidden; 
        #mc_embed_signup a.mc_embed_close cursor:pointer;  
        #mc-embedded-subscribe .button margin:0; padding:0; 
    </style>
    <script type="text/javascript">
    $(document).ready(function()
        $("#mc_embed_close").click(function()
            $("#mc_embed_signup").hide();
        );
        alert($("#mc-embedded-subscribe-form").css('display'));
    );
    </script>
    <div id="mc_embed_signup">

    <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate style="width:500px; height:500px; background-repeat:no-repeat; background-position:center;">

    <div class="mc-field-group">
        <div style="position:relative">
        <a href="/support">
            <img src="/images/pop-ups/summer-drive-button.png" style="position:absolute; top:350px; border:1px dotted #ccc" />
        </a>
        <img src="/images/pop-ups/summer-drive.jpg" />
    </div>

    </div>
    <a id="mc_embed_close" class="mc_embed_close" style="position:absolute; top:5px; right:10px;">&times;</a>   

    <div class="clear"></div>

    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="position:absolute; top:0; left:0; display:none"></div>
        <div class="response" id="mce-success-response" style="width:300px; position:absolute; background-color:#FFF; top:30px; left:75px; display:none"></div>
    </div>  

    </form>
    </div>

【参考方案1】：

表单的默认样式因浏览器和渲染模式而异，但它只是一个带有一些边距或填充的块元素。

您的 CSS 为表单元素指定 position:fixed，并将其放置在窗口的中心。如果将表单元素替换为 div，则必须更改 CSS 以使其适用于 div。您可能希望向 div 添加一个类，以便您可以专门针对它。