Question

朋友们，我有以下代码。它在Firefox中运行良好，但在chrome和Internet Explorer中它看起来非常难看。在此代码中，输入框和按钮没有出现在正确的单行中。他们的对齐非常糟糕。如何使它们在单行中看起来精确，甚至没有小错误。

  <style>
#header
{
background:#243342;
color:#dcdcdc;
height:55px;
min-width:960px;
padding-left:20px;
padding-right:50px;
}
#header a
{
text-decoration:none;
}
</style>

<div id='header'>
<div style='float:left;'>
<div>
  <input type="text" name="url" id="url" class='input-normal'  onblur="if (this.value == &quot;&quot;) {this.value = &quot;http://example.com&quot;;}" onfocus="if (this.value == &quot;http://example.com&quot;) {this.value = &quot;&quot;;}" value="http://example.com"/>
    <button type="submit" name="submit" class='button-normal' id='button-go-responser' onClick="loadsite();">Go</button></div>
</div>
<div style='float:right'>
Custom width:<input type="text" id="custom_width" class='input-normal input-small'/>
Custom height:<input type="text" id="custom_height" class='input-normal input-small'/>
<button type="submit" id="button-set-custom" onClick = "set_custom();" class='button-normal'>Set</button></div>
<div style='clear:both'></div>
</div>

Answer 1

尝试删除min-width属性并为其添加适当的宽度属性。一旦它们的尺寸完美，那么IE就会将它们渲染成一行。

如何使按钮和输入框以单行显示

1 个答案: