使用html/css的内联表单_Html_Css_Forms

使用html/css的内联表单

html css forms

使用html/css的内联表单,html,css,forms,Html,Css,Forms,我还在学习WordPress和HTML/css。我正在使用Klaviyo在我的网站上嵌入电子邮件注册表单。我从他们的表单创建者那里得到了基本代码，这些代码将所有内容都放在一行中（下面的大部分代码都是原始代码，添加了邮政编码表单） .klaviyo_样式。klaviyo_浓缩_嵌入_， .klaviyo_condensed_style.klaviyo_condensed_embed_{ 字体系列：Arial； } .klaviyo_样式。klaviyo_浓缩_嵌入_标签， .klaviyo_c

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


.klaviyo_样式。klaviyo_浓缩_嵌入_，
.klaviyo_condensed_style.klaviyo_condensed_embed_{
字体系列：Arial；
}
.klaviyo_样式。klaviyo_浓缩_嵌入_标签，
.klaviyo_condensed_样式.klaviyo_condensed_嵌入_标签{
颜色：#222；
}
.klaviyo_style.klaviyo_condensed_embed_MMaJiG输入[type=text]，
.klaviyo_style.klaviyo_condensed_embed_MMaJiG输入[类型=电子邮件]，
.klaviyo_condensed_style.klaviyo_condensed_embed_MMaJiG输入[type=text]，
.klaviyo_condensed_style.klaviyo_condensed_embed_MMaJiG输入[类型=电子邮件]{
边界半径：3px；
}
.klaviyo_style.klaviyo_condensed_embed_MMaJiG.klaviyo_submit_按钮，
.klaviyo_condensed_style.klaviyo_condensed_embed_MMaJiG.klaviyo_submit_按钮{
背景色：#F10382；
边界半径：3px；
}
.klaviyo_style.klaviyo_condensed_embed_MMaJiG.klaviyo_submit_按钮：悬停，
.klaviyo_condensed_style.klaviyo_condensed_embed_MMaJiG.klaviyo_submit_按钮：悬停{
背景色：#22222；
}
通讯注册
订阅
KlaviyoSubscribe.attachToForms（“#电子邮件"注册”{
成功后隐藏形式：正确
});

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

我目前面临的问题是，我在Klaviyo网站上看到了3种不同的视图，看起来像这样（它变灰了，但你可以看到它）：

加载原始HTML时，如下所示：

在我的网站上：

原因很可能是

表单

中的

div

元素是块元素，默认情况下块元素的宽度为100%，因此堆叠在彼此下方

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

第一件事。您的doctype不正确，您处于“怪癖模式”。它应该是

。解决这个问题，让我们知道你的立场。谢谢，我不知道，但是没有做任何改变。事实上，你对三种不同的情况有三种不同的看法，这令人不安，我不知道我们如何复制它来帮助你。它适用于原始html，但在我的网站上没有。我在用wordpress做我的网站，这可能是罪魁祸首吗？取决于。。。一个原因可能是其他CSS规则由于特殊性而否决了这一规则。您应该使用浏览器工具检查哪些规则适用于这些div以及它们有哪些选择器。然后在您自己的样式表中使用这些选择器将

display:inline block

应用于这些元素。

<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>

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