我不能在输入标签之间放置空格

Question

如何在输入标签之间放置空格？我的页面如下所示：http://i.imgur.com/ZpJ3gIu.png没有间距。我希望看起来像这样：http://i.imgur.com/Ipj7oOD.png显示在框的中间。

.enquiry {
    max-width: 1200px;
    width: 100%;
}
.form {
    text-align: center;
    display: inline-block;
    overflow: hidden;   
    max-width: 1200px;
    margin: 0 auto;
} 
.clip3 {
    width: 100%;
    float:left;
    display: block;
    padding: 30px 50px;
} 
.clip2 {
    width: 33.3%;
    float:left;
    display: block;
    display: inline-block;
} 

<form class="form" method="post">
    <section>
      <div class="clip2"> 
        <input class="name" type="text" value="" name="name" placeholder="Your Name">
      </div>

      <div class="clip2">
        <input class="email" type="text" value="" name="email" placeholder="Email">
      </div>

      <div class="clip2">
         <input class="phone" type="text" value="" name="phone" placeholder="Phone">
      </div>
    </section>

    <section>
      <div class="clip3">
        <input class="enquiry" type="text" value="" name="enquiry" placeholder="Enquiry">
      </div>
    </section>
</form>

Answer 1

您必须相应地更改 CSS ：

代码段

＆＃13;

＆＃13;

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.enquiry {
  max-width: 1200px;
  width: 100%;
}
.form {
  text-align: center;
  display: block;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
.form section {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}
.form section::after,
.form section::before {
  content: "";
  display: table;
}
.form section::after {
  clear: both;
}
.clip2 {
  width: 33.3%;
  float: left;
  display: block;
  padding: 0 15px;
}
.clip2 input {
    width: 100%;
}
.clip3 {
  width: 100%;
  float: left;
  display: block;
  padding: 30px 15px;
}

＆＃13;

<form class="form" method="post">
  <section>

    <div class="clip2">

      <input class="name" type="text" value="" name="name" placeholder="Your Name">
    </div>

    <div class="clip2">

      <input class="email" type="text" value="" name="email" placeholder="Email">
    </div>

    <div class="clip2">

      <input class="phone" type="text" value="" name="phone" placeholder="Phone">
    </div>
  </section>
  <section>
    <div class="clip3">

      <input class="enquiry" type="text" value="" name="enquiry" placeholder="Enquiry">
    </div>
  </section>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用margin-left和margin-right标签来增加间隙。

＆＃13;

＆＃13;

.enquiry {
	max-width: 1200px;
	width: 100%;
	
}
.form {
	text-align: center;
	display: inline-block;
	overflow: hidden;	
	max-width: 1200px;
	margin: 0 auto;

} 
.clip3 {
	width: 100%;
	float:left;
	display: block;
	padding: 30px 50px;
	
	
} 
.clip2 {
	width: 33.3%;
	float:left;
	display: block;
	
	display: inline-block;
	
} 

input{

    margin-left:5px;

    margin-right:5px;
}

＆＃13;

<form class="form" method="post">
    <section>

    <div class="clip2">
        
        <input class="name" type="text" value="" name="name" placeholder="Your Name">
    </div>

    <div class="clip2">
       
        <input class="email" type="text" value="" name="email" placeholder="Email">
    </div>

   <div class="clip2">
   
    <input class="phone" type="text" value="" name="phone" placeholder="Phone">
	</div></section>
	<section>
	<div class="clip3">
    
    <input class="enquiry" type="text" value="" name="enquiry" placeholder="Enquiry">
</div>
    </section>
</form>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）

Answer 3

这可能会有所帮助，您可以更改宽度％以将页面置于中心位置

.body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
width: 80%;
margin-right: auto;
margin-left: auto;
padding: 2.5% 2.5% 0;
background: white;
line-height: 1.8;
border-radius: 5px;

}

这里80％意味着左边10％的差距和右边10％的差距