时间戳

首页 > 解决方案 > 为什么我网站上的按钮在本地工作，但在我在线上传时改变了位置和格式？

html - 为什么我网站上的按钮在本地工作，但在我在线上传时改变了位置和格式？

问题描述

我从 MailChimp 嵌入了一个表单，我尝试使用 CSS 自定义按钮。当我在笔记本电脑上本地查看时它可以工作，但是当我上传到 github 时会改变位置并清除所有格式。请帮忙！！！我已经尝试了一切。请参阅下面的图像和我的代码以供参考。

图 1 - 本地：

在此处输入图像描述

图 2 - 在线：

在此处输入图像描述

<!DOCTYPE html>
<html>

<head>

    <title></title>
    <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
            <style type="text/css">
                #mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; }
                /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
                We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
            </style>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>

    <div id="container">

        <div class="box" id="text">

            <P>THE BIGGEST TECH EVENT OF THE YEAR</P>

        </div>



        <div class="box">

            <!-- Begin MailChimp Signup Form -->

            <div id="mc_embed_signup">

                <form action="https://website.us19.list-manage.com/subscribe/post?u=85ff9e186cc7716994921bf48&amp;id=fd58e3c77c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                    <div id="mc_embed_signup_scroll">


                        <div class="clear">

                            <button class="button" name="subscribe" id="mc-embedded-subscribe">Press Here</button>

                        </div>

                    </div>

                </form>

            </div>

            <!--End mc_embed_signup-->


        </div>



    </div>


</body>
</html>



html, body {
    margin: 0px;
    padding: 0px;
}

body {
    background: url(bg.jpg) no-repeat fixed center;
    background-size: cover;
}

#container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.box {
    width: 100%;
    text-align: center;
}

#text p {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.box button {
    background-color: #000;
    color: #fff;
    width: 150px; 
    height: 40px;
    font-family: 'Oswald', sans-serif;
}

.box button:hover {
    cursor: pointer;
    background-color: #fff;
    color: #000;
    width: 150px;
    border: 1px solid #000
}

标签： htmlcssbuttonformattingmailchimp

解决方案

推荐阅读