Question

所以我的老板对我说，“嘿，你这么做吧！我们的网站顶部有一条横幅，上面有我们的电话号码和我们的新闻简报。”虽然我老了，很容易混淆，但我觉得现在是时候停止使用表格，并像上帝那样用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是否真的是外星人发明的残酷技巧，让我们在打印“为人服务”的副本时让我们被占用？

HALP！

Answer 1

没有
没有
没有

将每个项目放在它自己的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;
}

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

Answer 2

<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>，停止使用 进行间距以及其他我不了解的内容。哦，还要确保你不在quirks mode。

如何使用CSS垂直对齐混合元素？

2 个答案: