html - 如何在一行中对齐文本框和标签

Question

这是我的代码 JsFiddle .如何在一行上对齐文本框和标签？

<div class="form-style-10">
   <form action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
      <input type=hidden name="orgid" value="00D90000000qWA6">
      <input type=hidden name="retURL" value="https://google.com">

      <div class="inner-wrap">
         <label for="first_name">First Name*</label>
         <input id="first_name" maxlength="40" name="first_name" size="50" type="text" required />          
      </div>
      <div class="button-section">
         <input type="submit" name="submit">
      </div>
   </form>
</div>

Answer 1

label和input固定宽度，label左浮动

.form-style-10 label{
    width:100px;
    float:left;
}
.form-style-10 input[type="text"], .form-style-10 input[type="date"], .form-style-10 input[type="datetime"], .form-style-10 input[type="email"], .form-style-10 input[type="number"], .form-style-10 input[type="search"], .form-style-10 input[type="time"], .form-style-10 input[type="url"], .form-style-10 input[type="password"], .form-style-10 textarea, .form-style-10 select {
    width: 270px;
}

请查看更新后的jsfiddle