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
  1. 不
  2. 不
  3. 不

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