我如何在文本旁边对齐联系表格 7

Question

我正在使用 WordPress 联系页面，并希望有一个谷歌地图，在它下方有一个包含联系方式（实际地址、电话、电子邮件等）的部分，在这些联系方式的右侧，我会想拥有“联系表格 7”表格，我想获得有关如何对齐联系表格短代码的帮助，以使文本位于联系表格的左侧。我目前拥有的是

    <p align="left">
     Please fill in the form on the right 
     or use the contact information below 
     to contact us.

    <strong>Tel:</strong> 310 0000 <strong>Fax: </strong>310 0000

    <strong>Physical Address</strong>
    lot 20697, Western northQ

    <strong>Postal Address</strong>
     PO Box 2842, Jersey

    </p>


    [contact-form-7 id="761" title="Contact form 1"]

所做的只是在联系方式下方显示联系表格，而不是在右侧

我还减少了我的 css 中联系表单的宽度，以便它可以放在文本旁边

    #contact-form { width: 250px; }

请帮忙，谢谢

Answer 1

一点 CSS 和组织就可以了 :)

HTML

<div id="contact">
    <div id="left"> 

      <p>
         Please fill in the form on the right 
         or use the contact information below 
         to contact us.

        <strong>Tel:</strong> 310 0000 <strong>Fax: </strong>310 0000

        <strong>Physical Address</strong>
        lot 20697, Western northQ

        <strong>Postal Address</strong>
         PO Box 2842, Jersey

        </p>
    </div>

        <div id="right">[contact-form-7 id="761" title="Contact form 1"]</div></div>

CSS

#contact{
width: 100%;
margin: 0;
padding: 0;
}

#contact #left{
width: 40%;
float: left;
}

#contact #right{
width: 60%;
float: right;
}