如何彼此相邻和行显示 html 表单

Question

我目前正在尝试让两个表单彼此相邻，然后它下面的另外两个表单全部对齐。如果有人有任何建议来帮助我，那就太好了。这是我在jsfiddle中的源代码。

我正在尝试将名称和公司输入彼此相邻，然后是其下方的电话和电子邮件，并在底部显示注释文本框。我正在尝试 40% 的宽度，它有点有助于获得第一行。我正在考虑使用表格路线，因为我可能会为对齐的表单正常工作，但我知道表格不是对此进行编码的正确路线。https://jsfiddle.net/xtwistedmetal/two7hgtm/1/

或

<style type="text/css">
	#mc_embed_signup {
		background: #fff;
		clear: left;
		font: 14px Helvetica, Arial, sans-serif;
	}
	.mc-field-group1 {
		display: inline-block;
		width: 40%;
	}
	.mc-field-group2 {
		display: inline-block;
	}
	
</style>

<div id="mc_embed_signup">
		<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
			<div id="mc_embed_signup_scroll">
				<div align="center">
					<h2> Wholesale Contact Form</h2>
				</div>
				<div class="mc-field-group1">
					<label for="mce-FNAME">Name </label>
					<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
				</div>
				<div class="mc-field-group1">
					<label for="mce-MMERGE3">Company Name </label>
					<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
				</div>
				<div class="mc-field-group2">
					<label for="mce-EMAIL">Email Address </label>
					<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
				</div>
				<br>
				<div class="mc-field-group2">
					<label for="mce-MMERGE2">Phone Number </label>
					<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
				</div>
				<div class="mc-field-group">
					<label for="mce-COMMENTS">Comments </label>
					<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
					<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
				</div>
				<div id="mce-responses" class="clear">
					<div class="response" id="mce-error-response" style="display: none;"></div>
					<div class="response" id="mce-success-response" style="display: none;"></div>
				</div>
				
				<div class="clear" align="center">
					<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
				</div>
			</div>
		</form>
	</div>

Answer 1

您可以尝试如下方法

.form-group:after{
  content: "";
  display:table;
  clear:both;
} 
.form-group-half{
  width:44%;
  padding:0 3%;
  float:left;
}
.form-group-half > label{
  display:block;
}
.form-group-half > input,
.form-group-half > select,
.form-group-half > textarea {
  width:100%;
}

<div class="form-group">
  <div class="form-group-half">
    <label>Field 1</label>
    <input type="text" name="field1">
  </div>
  
  <div class="form-group-half">
    <label>Field 2</label>
    <input type="text" name="field2">
  </div>
</div>
<div class="form-group">
  <div class="form-group-half">
    <label>Field 3</label>
    <input type="text" name="field3">
  </div>
  
  <div class="form-group-half">
    <label>Field 4</label>
    <input type="text" name="field4">
  </div>
</div>

Answer 2

HTML ;

<div id="mc_embed_signup">
    <form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
        <div id="mc_embed_signup_scroll">
            <div align="center">
                <h2> Wholesale Contact Form</h2>
            </div>
            <div class="mc-field-group1" style=>
      <div style="width:40%">
       <label for="mce-FNAME">Name </label>
                 <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
      </div>
      <div style="width:40%">
        <label for="mce-MMERGE3">Company Name </label>
                <input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
      </div>
            </div>
            <div class="mc-field-group2">
              <div style="width:40%">
                <label for="mce-EMAIL">Email Address </label>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
    </div>
     <div style="width:40%">
                <label for="mce-MMERGE2">Phone Number </label>
                <input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
      </div>
            </div>
            <br>
            <div class="mc-field-group">
                <label for="mce-COMMENTS">Comments </label>
                <!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
                <textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
            </div>
            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display: none;"></div>
                <div class="response" id="mce-success-response" style="display: none;"></div>
            </div>
            <div class="clear" align="center">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
            </div>
        </div>
    </form>
</div>

.CSS

<style type="text/css">
#mc_embed_signup {
    background: #fff;
    clear: left;
    font: 12px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
    width: 100%;
display: inline-flex;
}
.mc-field-group2 {
    display: inline-flex;
    width: 100%;
}
label{
   color:red;
   width:40px !important;
}