html - 在表单上方左右对齐 2 个文本 block

Question

fiddle 可以在这里找到，任何帮助解决这个问题将不胜感激!非常感谢大家的帮助，该解决方案被选为最佳答案!:

.buttoncontact2 {
  margin: 0px auto;
  text-align: center;
  text-transform: none;
  color: #ffffff;
  padding: 15px 45px;
  border-radius: 50px;
  background: #6DB9FC;
  font-weight: bold;
  display: inline-block;
  margin-top: 15px;
}

#contactform2 {
  text-align: center;
  color: #1a1a1a;
  background-color: #ffffff;
}

#contactform2 .sendmessagetext {
  padding-top: 50px;
  text-transform: none;
}

#contactform2 form {
  width: 75%;
  margin: 0 auto;
}

.wrap {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.chours {
  font-weight: bold;
  padding-bottom: 5px;
}

<section id="contactform2" class="cform">
  <div class="wrap">
    <h2 class="sendmessagetext">Get in Touch</h2>
    <p class="chours">Phone:
      <a href="tel:<?=$ADMIN_PHONE;?>">
        <?=$ADMIN_PHONE;?>
      </a><br> Hours:
      <br> Monday - Friday: 8AM - 8PM<br> Saturday: 9AM - 6PM<br> Sunday: Closed</p>
    <form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
      <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
      <input type="text" name="fname" id="name" placeholder="NAME">
      <input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
      <input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
      <input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
      <select name="service" id="service" placeholder="Select a Service">
		<option value="families">Families</option>
		<option value="senior-cleaning">Senior Cleaning</option>
		<option value="senior-downsizing">Senior Downsizing</option>
		<option value="organizing-services">Organizing Services</option>
		<option value="packing-and-unpacking">Packing & Unpacking</option>
		<option value="home-staging">Home Staging</option>
	</select>
      <select name="package" id="package" placeholder="Select a Package">
		<option value="dark-blue">Dark Blue</option>
		<option value="true-blue">True Blue</option>
		<option value="blue-move">Blue Move</option>
	</select>
      <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
      <input name="form_name" type="hidden" value="contact_form" />
      <button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button>
    </form>
    <br><br>
    <div class="clear"></div>
  </div>
</section>

我基本上是在寻找一种响应式的方法，使电话号码显示在表单的左上角对齐，其余的显示在表单的右上角对齐。

如有任何建议，我们将不胜感激!

Answer 1

您可以使用flexbox 来解决这种对齐问题。在下面发布的代码中，我在您的文本周围创建了一个包装器 div，并且我使用了 flexbox 来对齐子元素。

HTML

<div class="above-form-wrap">
    <p class="chours">Phone: <a href="tel:904-521-4141">904-521-4141</a></p>
    <p class="chours">Hours:<br>
    Monday - Friday: 8AM - 8PM<br>
    Saturday: 9AM - 6PM<br>
    Sunday: Closed</p><a id="cform1" name="cform1"></a>
</div>

CSS

.above-form-wrap {
    width: 40%; /*form width, you may need to add related style in your media query*/
    margin: 0 auto;
    display: flex;
    flex: 1 1 50%;
    align-items: center;
}
.above-form-wrap .chours {
    width: 50%;
}