如何对齐文本旁边的联系表单7

Question

我正在使用WordPress联系页面，并希望拥有一张谷歌地图，并在其下面有一个包含联系方式（实际地址，电话，电子邮件等）的部分，并在这些联系方式的右侧，我会喜欢有＃34;联系表7＆＃34;形式，我想帮助如何对齐联系人形式短代码，使文本在联系表单的左侧。我现在拥有的是

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