Javascript 将文本和表单平行放置（并排）-HTML

我试着把一个表格和一些段落文本并排放在左边，这样它们就互相平行了，但我不明白我怎么能做到这一点

目前我正在尝试将表单向右浮动，但是社交图标会从底部移动到屏幕左侧

我想将ID：“myForm”和类“info”并排放置 代码：

阿什迪普·索尼
身体{
背景色：黑色；
背景图片：url（）；
颜色：白色；
字体系列：无衬线；
}
#名字{
颜色：白色；
字体系列：coolvetica；
字体大小：50px；
文本对齐：居中；
填充顶部：60px；
字母间距：6px；
字体大小：粗体；
文本转换：大写；
}
#魔术师{
颜色：白色；
字体系列：雷威；
字体大小：25px；
字母间距：11px；
利润率最高：2%；
文本对齐：居中；
}
人力资源{
边界：0；
高度：1px；
背景：#333；
背景图像：-webkit线性渐变（左，#ccc，#ffffff，#ccc）；
背景图像：-moz线性梯度（左，#ccc，#ffffff，#ccc）；
背景图像：-ms线性梯度（左，#ccc，#ffffff，#ccc）；
背景图像：-o-线性梯度（左，#ccc，#ffffff，#ccc）；
宽度：50%；
最大宽度：100%；
}
#信息{
}
#信息h2{
颜色：白色；
字体系列：男爵neue；
字体大小：30px；
填充：30px 0px 0px 10px；
保证金权利：50%；
}
#信息p{
字体系列：无衬线；
字体大小：15px；
填充顶部：10px；
左侧填充：10px；
保证金权利：50%；
}
#接触{
左侧填充：10px；
线高：1.7em；
保证金权利：50%；
}
#myForm{
排名：0；
浮动：对；
}
☰ 菜单








阿什迪普·索尼
魔术师

查询
电话：（+44）

电邮：Bookings@ArshdeepSoni.com
如需预订，请填写以下表格或发送电子邮件，我们将尽力在48小时内回复您
您的姓名：

主题：



您的电子邮件：



电话号码：



信息：

您应该像这样将“myForm”移到“info”div之外

    <div id="info">
        <h2>Enquiries</h2>
        <p id="contact">Phone: (+44)</p>
        <email id="contact">Email: Bookings@ArshdeepSoni.com</email>
        <p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings@ArshdeepSoni.com?" target="_top"> Bookings@ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
    </div>

    <form id="myForm" method="post" action="Contact.html" onsubmit="#"> 
        <p>Your Name: </p>
        <input type="text" name="name"/>
        <p>Subject: </p>
        <input type="text" name="subject"/></br>
        <p>Your Email: </p>
        <input type="text" name="email"/></br>
        <p>Phone Number: </p>
        <input type="text" name="number"/></br>
        <p>Message: </p>
        <textarea id="message"></textarea>
        <input type="submit" value="Send"/>
    </form>

#myForm {
    display:inline-block;
}
#info {
    width: 50%;  // Adjust to your liking
    float:left;
}

---

您可以在css中使用box模型来实现这一点，请检查下面代码段中的代码

@介质（最小宽度：500px）{
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.半列{
浮动：左；
宽度：50%；
填充：0 20px；
框大小：边框框；
边框：实心1px#ccc；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.dcenter{
显示：块；
文本对齐：居中；
填充物：5px；
}

HTML信息在此
这里的表单代码
这里的图标

我将段落和h2包装在另一个div中，并将其浮动到左侧，然后去掉float:right作为表单div，而只做margin left:20%等

#myForm {
    display:inline-block;
}
#info {
    width: 50%;  // Adjust to your liking
    float:left;
}