文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >格式CCS样式请求

问格式CCS样式请求
EN

Stack Overflow用户
提问于 2020-02-18 08:32:22
回答 2查看 55关注 0票数 0

本页顶部的表格是用aweber制作的。我想要创建这样一个表单，但我不能得到注册部分在电子邮件字段的右边，如在示例页。(平均水平形式)

样本页：https://www.backlinko.com/

我希望能够做您在示例页面中看到的相同的表单。我怎样才能改变地点呢？

​

代码语言：javascript
复制
<!-- AWeber Web Form Generator 3.0.1 -->
<style type="text/css">
#af-form-586791810 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-586791810 .af-body input.text, #af-form-586791810 .af-body textarea{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:solid;color:#454545;text-decoration:none;font-style:normal;font-weight:normal;font-size:24px;font-family:Trebuchet MS, sans-serif;}
#af-form-586791810 .af-body input.text:focus, #af-form-586791810 .af-body textarea:focus{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:solid;}
#af-form-586791810 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#454545;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Helvetica, sans-serif;}
#af-form-586791810 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:inherit;font-size:16px;font-family:Helvetica, sans-serif;}
#af-form-586791810 .af-quirksMode{padding-right:60px;padding-left:60px;}
#af-form-586791810 .af-standards .af-element{padding-right:60px;padding-left:60px;}
#af-form-586791810 .buttonContainer input.submit{background-image:none;background-color:#4D0B4D;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Trebuchet MS, sans-serif;}
#af-form-586791810 .buttonContainer input.submit{width:auto;}
#af-form-586791810 .buttonContainer{text-align:center;}
#af-form-586791810 button,#af-form-586791810 input,#af-form-586791810 submit,#af-form-586791810 textarea,#af-form-586791810 select,#af-form-586791810 label,#af-form-586791810 optgroup,#af-form-586791810 option{float:none;position:static;margin:0;}
#af-form-586791810 div{margin:0;}
#af-form-586791810 form,#af-form-586791810 textarea,.af-form-wrapper,.af-form-close-button,#af-form-586791810 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-586791810 input,#af-form-586791810 button,#af-form-586791810 textarea,#af-form-586791810 select{font-size:100%;}
#af-form-586791810 select,#af-form-586791810 label,#af-form-586791810 optgroup,#af-form-586791810 option{padding:0;}
#af-form-586791810,#af-form-586791810 .quirksMode{width:100%;max-width:418px;}
#af-form-586791810.af-quirksMode{overflow-x:hidden;}
#af-form-586791810{background-color:#FFFFFF;border-color:#454545;border-width:1px;border-style:none;}
#af-form-586791810{display:block;}
#af-form-586791810{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.submit{white-space:inherit;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding-bottom:5px;padding-top:5px;}
.af-form-wrapper{text-indent:0;}
.af-form{box-sizing:border-box;text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
#af-form-586791810 input.submit,
#af-form-586791810 #webFormSubmitButton {
  -webkit-appearance: none;
}

.af-form {
  border-radius: 12px;
}

.af-header {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

.af-header p {
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-left: 50px;
}

.af-body input.text,
.af-body textarea {
  border-radius: 4px;
}

.af-element {
  padding-top: 10px;
  padding-bottom: 10px;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding-bottom: 5px;
}

#af-form-586791810 p {
  margin: 0;
}

#af-form-586791810 .af-body .privacyPolicy {
  font-size: 9px;
  padding-top: 20px;
  padding-bottom: 10px;
}

#af-form-586791810 .af-body .poweredBy {
  font-size: 9px;
  padding-top: 0;
  padding-bottom: 0;
}

#af-form #webFormSubmitButton,
.buttonContainer input.submit,
.af-body.af-standards input.submit {
  border:none;
  border-radius: 4px;
  padding: 10px 30px;
}

.bodyText p strong {
  letter-spacing: 0.03em;
  line-height:1.25;
}

.af-form .af-element-radio {
  padding-bottom: 5px;
  }
</style>
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="586791810" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist5545047" />
<input type="hidden" name="redirect" value="https://www.aweber.com/form/thankyou_vo.html" id="redirect_06888bc1326c8dabe3e277c31b9118ce" />

<input type="hidden" name="meta_adtracking" value="My Web Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_forward_vars" value="1" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-586791810" class="af-form"><div id="af-body-586791810" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-105496004">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-105496004" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Abone Ol!" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=rBxs7JyMHIwM" alt="" /></div>
</form>
<script type="text/javascript">
// Special handling for in-app browsers that don't always support new windows
(function() {
    function browserSupportsNewWindows(userAgent) {
        var rules = [
            'FBIOS',
            'Twitter for iPhone',
            'WebView',
            '(iPhone|iPod|iPad)(?!.*Safari\/)',
            'Android.*(wv|\.0\.0\.0)'
        ];
        var pattern = new RegExp('(' + rules.join('|') + ')', 'ig');
        return !pattern.test(userAgent);
    }

    if (!browserSupportsNewWindows(navigator.userAgent || navigator.vendor || window.opera)) {
        document.getElementById('af-form-586791810').parentElement.removeAttribute('target');
    }
})();
</script><script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-586791810")) {
                document.getElementById("af-form-586791810").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-586791810")) {
                document.getElementById("af-body-586791810").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-586791810")) {
                document.getElementById("af-header-586791810").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-586791810")) {
                document.getElementById("af-footer-586791810").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

<!-- /AWeber Web Form Generator 3.0.1 -->

​

谢谢你的帮助

javascript
html
css
forms
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-18 08:58:46

你可以用绝对位置来实现这一点。在您的示例中，按钮位于输入的上方。

这不是一个好主意，就好像你写了一封长长的电子邮件，短信就在按钮后面。所以，您可以做的是添加一个填充-右等于按钮的宽度。

见下文

提示:不要共享不必要的代码。你分享的90%与你的问题无关，也与你的问题无关。此外，请格式化您的代码。当你在你自己的项目中发布问题时。

​

代码语言：javascript
复制
.buttonContainer {
  position: absolute;
  bottom:25px;
  right:60px;
  padding:0!important;
  }
.af-body.af-standards {
position: relative;
}
.af-body.af-standards input.text {
padding: 4px 130px 4px 2px!important;
box-sizing:border-box;
}
#af-form-586791810 .af-body .af-textWrap {
  width: 98%;
  display: block;
  float: none;
}

#af-form-586791810 .af-body input.text,
#af-form-586791810 .af-body textarea {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: solid;
  color: #454545;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  font-family: Trebuchet MS, sans-serif;
}

#af-form-586791810 .af-body input.text:focus,
#af-form-586791810 .af-body textarea:focus {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: solid;
}

#af-form-586791810 .af-body label.previewLabel {
  display: block;
  float: none;
  text-align: left;
  width: auto;
  color: #454545;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#af-form-586791810 .af-body {
  padding-bottom: 15px;
  padding-top: 15px;
  background-repeat: no-repeat;
  background-position: inherit;
  background-image: none;
  color: inherit;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#af-form-586791810 .af-quirksMode {
  padding-right: 60px;
  padding-left: 60px;
}

#af-form-586791810 .af-standards .af-element {
  padding-right: 60px;
  padding-left: 60px;
}

#af-form-586791810 .buttonContainer input.submit {
  background-image: none;
  background-color: #4D0B4D;
  color: #FFFFFF;
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-family: Trebuchet MS, sans-serif;
}

#af-form-586791810 .buttonContainer input.submit {
  width: auto;
}

#af-form-586791810 .buttonContainer {
  text-align: center;
}

#af-form-586791810 button,
#af-form-586791810 input,
#af-form-586791810 submit,
#af-form-586791810 textarea,
#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  float: none;
  position: static;
  margin: 0;
}

#af-form-586791810 div {
  margin: 0;
}

#af-form-586791810 form,
#af-form-586791810 textarea,
.af-form-wrapper,
.af-form-close-button,
#af-form-586791810 img {
  float: none;
  color: inherit;
  position: static;
  background-color: none;
  border: none;
  margin: 0;
  padding: 0;
}

#af-form-586791810 input,
#af-form-586791810 button,
#af-form-586791810 textarea,
#af-form-586791810 select {
  font-size: 100%;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding: 0;
}

#af-form-586791810,
#af-form-586791810 .quirksMode {
  width: 100%;
  max-width: 418px;
}

#af-form-586791810.af-quirksMode {
  overflow-x: hidden;
}

#af-form-586791810 {
  background-color: #FFFFFF;
  border-color: #454545;
  border-width: 1px;
  border-style: none;
}

#af-form-586791810 {
  display: block;
}

#af-form-586791810 {
  overflow: hidden;
}

.af-body .af-textWrap {
  text-align: left;
}

.af-body input.image {
  border: none !important;
}

.af-body input.submit,
.af-body input.image,
.af-form .af-element input.button {
  float: none !important;
}

.af-body input.submit {
  white-space: inherit;
}

.af-body input.text {
  width: 100%;
  float: none;
  padding: 2px !important;
}

.af-body.af-standards input.submit {
  padding: 4px 12px;
}

.af-clear {
  clear: both;
}

.af-element label {
  text-align: left;
  display: block;
  float: left;
}

.af-element {
  padding-bottom: 5px;
  padding-top: 5px;
}

.af-form-wrapper {
  text-indent: 0;
}

.af-form {
  box-sizing: border-box;
  text-align: left;
  margin: auto;
}

.af-quirksMode .af-element {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.lbl-right .af-element label {
  text-align: right;
}

body {}

#af-form-586791810 input.submit,
#af-form-586791810 #webFormSubmitButton {
  -webkit-appearance: none;
}

.af-form {
  border-radius: 12px;
}

.af-header {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

.af-header p {
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-left: 50px;
}

.af-body input.text,
.af-body textarea {
  border-radius: 4px;
}

.af-element {
  padding-top: 10px;
  padding-bottom: 10px;
}

#af-form-586791810 select,
#af-form-586791810 label,
#af-form-586791810 optgroup,
#af-form-586791810 option {
  padding-bottom: 5px;
}

#af-form-586791810 p {
  margin: 0;
}

#af-form-586791810 .af-body .privacyPolicy {
  font-size: 9px;
  padding-top: 20px;
  padding-bottom: 10px;
}

#af-form-586791810 .af-body .poweredBy {
  font-size: 9px;
  padding-top: 0;
  padding-bottom: 0;
}

#af-form #webFormSubmitButton,
.buttonContainer input.submit,
.af-body.af-standards input.submit {
  border: none;
  border-radius: 4px;
  padding: 10px 30px;
}

.bodyText p strong {
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.af-form .af-element-radio {
  padding-bottom: 5px;
}
代码语言：javascript
复制
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank">
  <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="586791810" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="awlist5545047" />
    <input type="hidden" name="redirect" value="https://www.aweber.com/form/thankyou_vo.html" id="redirect_06888bc1326c8dabe3e277c31b9118ce" />

    <input type="hidden" name="meta_adtracking" value="My Web Form" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="email" />
    <input type="hidden" name="meta_forward_vars" value="1" />
    <input type="hidden" name="meta_tooltip" value="" />
  </div>
  <div id="af-form-586791810" class="af-form">
    <div id="af-body-586791810" class="af-body af-standards">
      <div class="af-element">
        <label class="previewLabel" for="awf_field-105496004">Email: </label>
        <div class="af-textWrap"><input class="text" id="awf_field-105496004" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
        </div>
        <div class="af-clear"></div>
      </div>
      <div class="af-element buttonContainer">
        <input name="submit" class="submit" type="submit" value="Abone Ol!" tabindex="501" />
        <div class="af-clear"></div>
      </div>
    </div>
  </div>
  <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=rBxs7JyMHIwM" alt="" /></div>
</form>

​

票数 0
EN

Stack Overflow用户

发布于 2020-02-18 08:47:26

只需将类名“刷新”更改为任意名称即可。

添加CSS并使用id af-form-586791810将类名添加到父div。

示例：

// CSS

代码语言：javascript
复制
      .refat {
        display: flex;
      }
      .refat .af-element {
          padding: 0 !important;
      }
      .refat .buttonContainer {
        align-self: flex-end;
      }

// HTML

代码语言：javascript
复制
      <div id="af-form-586791810" class="af-form"><div id="af-body-586791810" class="af-body af-standards refat">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60276708

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档