如何为我的网站对齐这些文本框？

时间：2017-04-29 17:58:09

标签： css

最近，我一直试图将我的两个文本框与我的网站对齐，但我无法理解。要明白我不像你那样了解CSS，但我需要知道要改变什么，以便它们不会出现在最左边和未对齐的地方。出于某种原因，这就是我网站上的样子：

http://i.imgur.com/zkxPBEl.png

正如您所看到的，即使我尝试使用在线编辑器将其居中，它也无法正确对齐。请帮忙！谢谢！

<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear">&nbsp;</div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
    if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
        document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
    }
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-604218668")) {
                document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-604218668")) {
                document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-604218668")) {
                document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-604218668")) {
                document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
            }
        }
    })();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->

4 个答案:

答案 0 :(得分：1)

您的输入标签具有不同的宽度设置。

style =＆＃34; width：200px;＆＃34;和style =＆＃34; width：460px;＆＃34;

使这些值相同。

答案 1 :(得分：1)

我相信这是您寻找的解决方案吗？您希望将名称输入字段中心与下一个字段对齐。如果您将位置设置为相对位置并将左侧位置设置为（（电子邮件宽度 - 名称宽度）/ 2）您将在左侧和右侧以相等的距离结束，使其居中

所以你的布局变成了这个

130px＆lt; --- 200px ---＆gt; 130px
＆lt; ------------ 460px ------------＆gt;

＆＃13;
＆＃13; 
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px; position:relative;left:130px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear">&nbsp;</div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

通过将style="margin: 0 0 0 13%;"添加到您的表单标记，它将正确居中。或者如果你想，那么你可以改变金额，如果它不是居中的话......我希望这会对你有所帮助:) 

<!-- AWeber Web Form Generator 3.0.1 --><form  style="margin: 0 0 0 13%;" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear">&nbsp;</div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
    if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
        document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
    }
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-604218668")) {
                document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-604218668")) {
                document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-604218668")) {
                document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-604218668")) {
                document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
            }
        }
    })();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->

答案 3 :(得分：0)

使容器保持div内联块。并使用＆＃34; text-align：center＆＃34;在持有该div的容器上。见下面的代码。希望它有所帮助。

＆＃13;
＆＃13; 
while ((arr = pattern.exec(str)) !== null) {
＆＃13; 
.af-form {
  text-align: center;
  }
.af-body {
margin: 0 auto;
display: inline-block;
}
.af-clear {
  text-align: center;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题