Question

这里可以找到小提琴，对此问题的任何帮助将不胜感激！非常感谢大家的帮助，解决方案是最佳答案！：

.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%;
}

对齐2个文本块左和右正好在表格之上

1 个答案: