html - 即使显示 : inline，表单标记也会破坏页面布局

Question

尽管阅读了不少于此的帖子，但我似乎仍然无法阻止此表单标签使用我能找到的所有技巧搞砸我的页面布局。我显然遗漏了一些东西。页面验证没有问题，但此表单标记将我的导航栏向下推。

这是表格:

<div class="skyblock2">
      <div class="form">
            <h1 class="white">If you have questions, we will answer all of them. <br />
            Leave your phone number and we will call you in 1 minute</h1>

      <form name="call-form" method="post" id="call-form" action="mysqlit.php" style="display: inline; padding: 0; margin: 0; background-color: transparent;">
        <input type="text" id="name" name="name" value="Your Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name';}" />
        <input type="text" id="telephone" name="telephone" value="Phone Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone Number';}" />
<a href="javascript:{}" onclick="document.getElementById('call-form').submit();" class="sky2">Give me a call</a>
      </form>

      </div>
</div>

这是 CSS:

div.skyblock2 {
width : 100%;
margin : 0 auto;
background-color : #0093cb;
color : white;
text-align : center;
}
div.form {
padding : 25px 0;
width : 80%;
margin : 0 auto;
text-align : center;
}

Answer 1

你可以试试这个:

CSS

.nav { position: absolute; top: 0; right: 0; }
.top { position: relative; }