0

我创建了一个简单的 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;
}
4

2 回答 2

0

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

于 2012-06-14T18:22:33.420 回答
0

当然，如果您margin-left: 10px;在 .zipbox 上使用它会居中并且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>而是将其包裹起来。

于 2012-06-14T23:27:32.537 回答