Как использовать CSS для вертикального выравнивания смешанных элементов? - PullRequest
Новая
       12

Как использовать CSS для вертикального выравнивания смешанных элементов?

2 голосов
/ 24 мая 2010

Итак, мой босс сказал мне: «Привет, ты! Сделай так, чтобы наверху нашего сайта был баннер, на котором есть наши номера телефонов и подписка на нашу новостную рассылку в одной строке».Хотя я стар и легко запутался, я подумал, что пора перестать использовать таблицы и делать это с помощью 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 на самом деле жестоким трюком, изобретенным космическими пришельцами, чтобы занять нас, пока они печатают копии "To Serve Man"?

Halp!

Ответы [ 2 ]

2 голосов
/ 24 мая 2010
  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;
}

Теперь форма контакта и регистрации будет на одной линии.

0 голосов
/ 24 мая 2010 
<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; для пробелов и, возможно, другие, о которых я не знаю.О, а также убедитесь, что вы не в режиме quirks .

...