HTML: Как я могу выровнять эту форму?

Question

HTML: Как я могу выровнять эту форму?

0

У меня есть форма в моем коде, но она находится в левой части страницы. Я не знаю, как его выровнять.

 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

И это выглядит так:

Любая помощь оценивается.

blutuu 22 март 2014, в 04:24

Источник

1

form { width: 400px; margin: 0 auto; }
mdesdev 22 март 2014, в 02:56
0

Вы используете кучу div s. По умолчанию они являются элементами уровня блока. Чтобы исправить это, нужно либо float их, либо display:inline-block в вашем CSS .row
Oberst 22 март 2014, в 02:56
0

Хм ... @mdesdev меня заинтересовал. Выровняли как? Вертикально или горизонтально?
Oberst 22 март 2014, в 02:58
0

@Oberst Оберст Горизонтально ... если это вопрос;)
mdesdev 22 март 2014, в 02:59
0

@blutuu, если на этот вопрос ответили, пожалуйста, пометьте его как таковой. Спасибо
reidjako 23 март 2014, в 04:25

Показать ещё 3 комментария

Теги:

html

forms

2 ответа

1

<style media="screen" type="text/css">

form {
width: 400px; 
margin: 0 auto; 
} 

</style>
 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

Это должно работать

reidjako 22 март 2014, в 00:33

Ещё вопросы

Вы используете кучу div s. По умолчанию они являются элементами уровня блока. Чтобы исправить это, нужно либо float их, либо display:inline-block в вашем CSS .row
Хм ... @mdesdev меня заинтересовал. Выровняли как? Вертикально или горизонтально?
@Oberst Оберст Горизонтально ... если это вопрос;)
@blutuu, если на этот вопрос ответили, пожалуйста, пометьте его как таковой. Спасибо

BarryDevSF · Accepted Answer · 2014-03-22T01-43-00.000Z

Если вы просто хотите, чтобы это было горизонтально в центре, поместите свою форму в ограниченный ширину div-родительский элемент и дед-папа div-doc с центрированным контентом:

<div style="text-align: center">
 <div style="width: 400px; text-align: left;">
  <form ...
  ...
  </form>
 </div>
</div>