CSS дисплей: блок не работает

Question

Я пытаюсь использовать CSS и HTML, чтобы заполнить контактную форму, но коробки не отображаются в виде «блок» (дисплей: блок) HTML:

<section class="body"> 
    <form method="post" action="index.php"> 

     <label>Name</label> 
     <input name="name" placeholder="Type Here"> 

     <label>Email</label> 
     <input name="email" type="email" placeholder="Type Here"> 

     <label>Message</label> 
     <textarea name="message" placeholder="Type Here"></textarea> 

     <label>*What is 2+2? (Anti-spam)</label> 
     <input name="human" placeholder="Type Here"> 

     <input id="submit" name="submit" type="submit" value="Submit"> 

    </form> 

</section> 

CSS:

.body { 
    width:576px; 
    margin:0 auto; 
    display:block; 
} 

заранее спасибо

Answer 1

Я думаю, что вы имеете в виду поля ввода не отображаются в виде блоков. Если так что вам нужно обернуть поля ввода в дивы, как этот

<section class="body"> 
    <form method="post" action="index.php"> 
     <div> 
     <label>Name</label> 
     <input name="name" placeholder="Type Here"> 
     </div> 
     <div> 
     <label>Email</label> 
     <input name="email" type="email" placeholder="Type Here"> 
     </div> 
     <div> 
     <label>Message</label> 
     <textarea name="message" placeholder="Type Here"></textarea> 
     </div> 
     <div> 
     <label>*What is 2+2? (Anti-spam)</label> 
     <input name="human" placeholder="Type Here"> 
     </div> 
     <div> 
     <input id="submit" name="submit" type="submit" 
      value="Submit"> 
     </div> 
    </form> 
</section> 

и написать этот CSS код для дивы

div, .body { 
    width:576px; 
    margin:0 auto; 
    display:block; 
} 

label { 
    display: inline-block; 
    width: 20% 
} 

Результат вы можете проверить here

Answer 2

Место ввода и метки в отдельный DIV-х

Working Example

<section class="body"> 
<form method="post" action="index.php"> 
<div> 
    <label>Name</label> 
     <input name="name" placeholder="Type Here"> 
</div> 
<div> 
     <label>Email</label> 
     <input name="email" type="email" placeholder="Type Here"> 
</div> 
<div> 
    <label>Message</label> 
     <textarea name="message" placeholder="Type Here"></textarea> 
</div> 
<div> 
     <label>*What is 2+2? (Anti-spam)</label> 
     <input name="human" placeholder="Type Here"> 
</div> 
     <input id="submit" name="submit" type="submit" value="Submit"> 
     </form>  
</section> 

Answer 3

Просто добавьте в ваш CSS:

input, textarea { 
    display: block; 
} 

Это делает ВСЕ поля ввода и текстовые области отображаемыми, поэтому используйте классы, если вы хотите, чтобы определенные единицы отображались.

В качестве альтернативы, я создаю класс .block {display: block;} и добавляю это к каждому вводу/текстовой области, если вы хотите, чтобы поле контролировалось по полю.

Answer 4

Положите элементы в мкл и применить стиль

Смотрите рабочую демку здесь DEMO

<section class="body"> 
    <form method="post" action="index.php"> 
     <ul class="ul"> 
      <li> 
       <label>Name</label> 
      </li> 
      <li> 
       <input name="name" placeholder="Type Here"> 
      </li> 
      <li> 
       <label>Email</label> 
      </li> 
      <li> 
       <input name="email" type="email" placeholder="Type Here"> 
      </li> 
      <li> 
       <label>Message</label> 
      </li> 
      <li> 
       <textarea name="message" placeholder="Type Here"></textarea> 
      </li> 
      <li> 
       <label>*What is 2+2? (Anti-spam)</label></li> 
      <li> 
       <input name="human" placeholder="Type Here"> 
     </li> 
      <li> 
       <input id="submit" name="submit" type="submit" value="Submit"> 
     </li> 
</ul>