CSS display:block 不工作

Question

我正在尝试使用 CSS 和 HTML 来完成联系表格，但是这些框没有以 'block' 表格显示（显示：块） 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

将您的输入和标签放在单独的 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 2

我想你的意思是输入字段没有显示为块。如果是这样，您需要像那样将输入字段包装在 div 中

<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>

并为 div

编写此 css 代码

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

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

你可以查看结果here

Answer 3

只需将此添加到您的 css：

input, textarea {
    display: block; 
}

这会使所有输入字段和文本区域显示块，因此如果您只希望某些部分显示块，请使用 classes。

或者，我创建了一个 .block {display: block;} class 并将其添加到每个 input/textarea 如果你想逐个字段控制。

Answer 4

将您的元素放入 ul 并应用样式

在此处查看工作演示 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>

CSS display:block 不工作

CSS display:block not working

html

css