2

所以我的老板对我说,“嘿,你!让它在我们网站的顶部有一个横幅,上面有我们的电话号码和我们的时事通讯的注册信息。” 虽然我老了而且很容易混淆,但我认为现在是停止使用表格并像上帝一样使用 css 的时候了。

<div id="hdr">
<i>Call us today</i> &nbsp;&nbsp; CorpHQ - nnn.nnn.nnnn &nbsp;&nbsp;
<i>Sign up for our newsletter:</i>&nbsp;&nbsp;
<form action="signup.php" method="post">
<input name="email" type="text">
<input name="submit" type="submit" value="SUBMIT">
</form>
</div>

但是,无论我尝试做什么让事情垂直对齐,我都会得到各种莫名其妙的结果,具体取决于是否在 Chrome、IE6、IE7 和 Firefox 中查看该站点。(我主要说的是字段和提交按钮的大小和垂直居中。)

1) 这里有我不知道的大秘密吗?

2) 我应该回到原来的计划使用桌子吗?

3) CSS 真的是外星人发明的一个残忍的把戏,让我们在打印“为人类服务”的副本时保持忙碌吗?

哈!

4

2 回答 2

2

将每个项目放在它自己的 div 中,并将所有这些 div 放在父 div 中。

<div class="wrapper">
  <div class="contact"></div>
  <div class="signup_form"></div>
</div>

现在,您可以根据需要对齐父 div(包装器),并且包装器中包含的每个元素都将从包装器的位置开始(然后您可以根据需要更改每个元素)。

.wrapper {
  width: 800px;
  margin: 0px auto; /* centered */
}

.contact {
  height: 200px;
  margin-left: 80px; /* will be 80 pixels off of the center */
  float: left; /* placed to the left */
}

.signup_form {
  float: right;
}

现在联系人和注册表单将在同一行。

于 2010-05-24T17:25:05.097 回答
0
<div id="hdr">
<form action="signup.php" method="post">
<i>Call us today</i> &nbsp;&nbsp; CorpHQ - nnn.nnn.nnnn &nbsp;&nbsp;
<i>Sign up for our newsletter:</i>&nbsp;&nbsp;

<input name="email" type="text">
<input name="submit" type="submit" value="SUBMIT">
</form>
</div>

表单显示为一个块。所以它会“跳”到下一行。这只是一个快速+肮脏的修复。你应该使用标签,停止使用<i>,停止使用&nbsp;间距,可能还有其他我不知道的。哦,还要确保你没有处于怪癖模式

于 2010-05-24T17:25:44.050 回答