使用 html/css 的内联表单答案

【问题标题】：Inline form using html/css使用 html/css 的内联表单
【发布时间】：2017-12-12 10:26:57
【问题描述】：

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

<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 时，它看起来像这样：

在我的网站上：

【问题讨论】：

第一件事。您的文档类型不正确，您处于“怪癖模式”。应该是<!DOCTYPE html>。解决这个问题，让我们知道你的立场。
谢谢，对此一无所知，但没有改变任何东西。
您对三种不同的情况有三种不同的看法这一事实令人不安，我不知道我们如何复制这一点来帮助您。

标签： html css forms

【解决方案1】：

原因很可能是form 中的div 元素是块元素，默认情况下是 100% 宽，因此相互堆叠。

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

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

【讨论】：

它适用于原始 html，但在我的网站上却不行。我正在为我的网站使用 wordpress，这可能是罪魁祸首吗？
取决于... 一个原因可能是其他 CSS 规则由于特殊性而推翻了这一规则。您应该使用浏览器工具检查哪些规则适用于这些 DIV 以及它们具有哪些选择器。然后在您自己的样式表中使用这些选择器将display: inline-block 应用于这些元素。