如何使用CSS设置此表单的样式？

Question

我是CSS的初学者并试图做NETTUTS，但网页上有一部分我不知道在CSS中究竟要做什么让它看起来正确......

我只是无法得到这个输入文本框，textarea和按钮这样对齐，说实话，导师在清除内容方面做得不好

使用替代和绝对定位，并设置顶部和右侧间距我认为不是一个好主意...我正在尝试使用FlexBox功能对齐它们但不知道为什么这些元素根本不移动。 ..

这是我的HTML＆amp; CSS3代码（用于chrome）：

<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <button>Submit</button>
</form>

#getAfreeQuote form {
 display:-webkit-box;
 -webkit-box-orient:vertical;
    height:500px;
}

 #getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
 }

 #getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;    
 }

 #getAfreeQuote button {
-webkit-box-ordinal-group:4;    
 }

结果：

Answer 1

我是这样做的：

<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <br /><input type="submit" value="Submit!" />
    <div class="clear"></div>
</form>
</section>


<style>
#getAfreeQuote h2 {
  text-transform: uppercase;
  color: blue;
}

div.clear {
  clear: both;
}

#getAfreeQuote form {
 width: 25em;
 position: relative;
}

 #getAfreeQuote input[name="yourName"]{
 width: 43%;
 }

 #getAfreeQuote input[name="yourEmail"]{
 width: 55%;
 float: right;
 }

 #getAfreeQuote textarea{
 width: 100%;
 height: 10em;
 }

 #getAfreeQuote input[name="timeScale"]{
  width: 100%;
 }

  #getAfreeQuote input[type="submit"]{
    text-transform: uppercase;
    background: orange;
    border: none;
    padding: 1em 2em;
    color: white;
    float: right;
  }

</style>

Answer 2

您有一个良好的开端，但您需要了解CSS布局属性的基础知识。一个好的开始是学习Sitepoint的基础知识，其中存在非常useful guide。祝你好运。

Answer 3

如果您不必使用FlexBox，则可以使用宽度：50％用于前两个文本输入，宽度：100％用于textarea和底部文本输入。将表单设置为所需的表单宽度