Question

我创建了一个简单的get方法表单，并且无法集中输入框。代码在wordpress中运行良好，但是当我插入wordpress页面时，输入框变得不对齐。

这是我在wordpress页面上插入的代码。

<div class="homebox"> 
<form method="get" action="/home-quote-page.html" form name="quote" rel="nofollow" onsubmit="return ray.ajax()"> 
<p class="topquotetext">Enter your zip code:</p>
<p><input name="zipcode" class="zipbox" type="text" value="" size="5" maxlength="5"/>       </p>
<p><div style="getquote"><input type="image" src="/Photos/startquote.gif" alt="Start Your Quote" name="go" value='Submit'/></div></form></p>
<div id="load" style="display:none;">Finding...Please wait.</div>   
</div>

这是css。一切正常，除了.zipbox，它将允许我改变盒子的颜色和高度，但这是它。无论我输入的宽度是多少，它都保持相同的宽度，它也不会在div内部居中。

.homebox {
text-align: center;
width: 300px;
height: 268px; 
background: #2872bd url(/Photos/home-insurance-box.jpg) no-   repeat; }

.topquotetext {
font-family: sans-serif, Arial, Verdana; 
font-size:16px; 
color:#ffffff;
padding-top:70px;
text-align: center;
}

.zipbox {
width: 95px;
height: 25px;
text-align: center;
font-size: 24px;
margin-right: 10px;
margin-left: 10px;
margin-top: 5px;
border: #7F9DB9 1px solid;
background-color: #FFFED2;
}

.getquote {
width: 300px;
text-align: center;
}

Answer 1

您是否将其粘贴到WP中的默认WYSIWYG中？如果是这样，WP正在剥离你的一些标记。找到一个允许您粘贴标记的插件，或者创建一个新模板并对此部分进行硬编码。

Answer 2

当然，如果你在.zipbox上使用margin-left: 10px;并且text-align: center不会使元素居中，只会将文本放在中心位置，它会居中。 WordPress没有任何问题，它就是你如何设计元素的风格。

试试这个，稍微更改样式表。

.zipbox {
    width: 95px;
    height: 25px;
    display: block;
    overflow: hidden;
    clear: both;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    border: #7F9DB9 1px solid;
    background-color: #FFFED2;
}

并确保父元素样式不会影响.zipbox，并且您不需要将<input />元素包装在<p></p>中，并使用<div></div>包装它代替。

在wordpress页面内的div内的表单中心输入类型文本？

2 个答案: