Question

我还在学习WordPress和HTML / css。我正在使用Klaviyo在我的网站上嵌入电子邮件注册表单。我从他们的表单创建者那里获得了基本代码，它将所有内容放在一行中（下面的大部分代码都是原始的，添加了Zip Code表单。）

<DOCTYPE! html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG,
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG {
          font-family: Arial;
        }
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG label,
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG label {
          color:#222;
        }
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG input[type=text],
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG input[type=email],
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG input[type=text],
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG input[type=email] {
          border-radius: 3px;
        }
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button,
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button {
          background-color:#F10382;
          border-radius: 3px;
        }
        .klaviyo_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button:hover,
        .klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button:hover {
          background-color:#222222;
        }
    </style>
</head>

<body>
    <form id="email_signup" class="klaviyo_condensed_styling klaviyo_condensed_float klaviyo_condensed_embed_MMaJiG" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate" style="margin-left: 50%">
        <input type="hidden" name="g" value="MMaJiG">
        <div class="klaviyo_field_group">
            <label for="k_id_email">Newsletter Sign Up</label>
            <input type="email" value="" name="email" id="k_id_email" placeholder="Your Email"/>
            <input type="number" value="" name="zip" id="k_id_zip_code" placeholder="Your Zip Code"/>
        </div>
        <div class="klaviyo_messages">
            <div class="success_message" style="display:none;"></div>
            <div class="error_message" style="display:none;"></div>
        </div>
        <div class="klaviyo_form_actions">
            <button type="submit" class="klaviyo_submit_button">Subscribe</button>
        </div>
    </form>
    <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
        <script type="text/javascript">
        KlaviyoSubscribe.attachToForms('#email_signup', {
        hide_form_on_success: true
        });
    </script>
</body>

我希望所有表单字段（电子邮件和邮政编码）和提交按钮都在一行中。

我面临的当前问题是我看到3个不同的观点，在Klaviyo网站上它看起来像这样（它变灰但你可以看到它）：

加载原始HTML时，它看起来像这样：

在我的网站上：

Answer 1

原因很可能是div内的form元素是块元素，默认情况下它们是100％宽，因此堆叠在彼此之下。

尝试添加此规则以将所有这些div定义为内联块（如果可用空间允许，可以在一行中对齐）：

form#email_signup > div {
  display: inline-block;
}

使用html / css的内联表单

1 个答案: