Question

我正在尝试使用CSS和HTML来填写联系表单，但这些框不会显示在＆＃39;块中。表格（显示：块） 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中

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

并为divs写这个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;}类，如果你想逐字段控制，可以将它添加到每个输入/ 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显示：阻止不起作用

4 个答案: