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

发布于 2024-09-03 10:29:21 字数 722 浏览 4 评论 0原文

所以我的老板对我说：“嘿，你！让我们的网站顶部有一个横幅，其中有我们的电话号码和订阅我们的时事通讯的信息。”虽然我已经老了而且很容易混淆，但我认为是时候停止使用表格并像上帝所希望的那样使用 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实际上是外星人发明的残酷伎俩，目的是让我们在打印《为人类服务》时保持忙碌吗？

哈普！

原文

So my boss says to me, "Hey you! Make it so there is a banner at the top our website that has our phone numbers and the signup for our newsletter in one line." Although I am old and easily confused I figured it was high time to stop using tables and do it with css like god intended.

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

However, no matter what I try to do get things vertically aligned, I get all sorts of inexplicable results depending upon whether the site is viewed in Chrome, IE6, IE7, and Firefox. (I'm mainly talking about the size and vertical centering of the field and submit button.)

1) Is there a BIG SECRET here I don't know about?

2) Should I just go back to my original plan to use a table?

3) Is CSS actually a cruel trick invented by space aliens to keep us occupied while they print up copies of "To Serve Man"?

Halp!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰葑 2024-09-10 10:29:21

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

现在，联系方式和注册表单将位于同一行。

Put each item in it's own div, and all those divs in a parent div.

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

Now, you can align the parent div (wrapper) however you want, and each element contained inside the wrapper will start out with the placement of the wrapper (then you can change each element as needed).

.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;
}

Now the contact and signup form will be on the same line.

回复收藏 0 原文

再可℃爱ぅ一点好了 2024-09-10 10:29:21

<div id="hdr">
<form action="signup.php" method="post">
<i>Call us today</i>    CorpHQ - nnn.nnn.nnnn   
<i>Sign up for our newsletter:</i>  

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

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

<div id="hdr">
<form action="signup.php" method="post">
<i>Call us today</i>    CorpHQ - nnn.nnn.nnnn   
<i>Sign up for our newsletter:</i>  

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

The form displays as a block. So it will "jump" to the next line. This is only a quick+dirty fix. You should use labels, stop using <i>, stop using for spacing and probably others I don't know about. Oh and also make sure you're not in quirks mode.

回复收藏 0 原文

~没有更多了~