我试图在左侧并排放置一个表格和一些段落文本，这样它们彼此平行我怎么也不明白我怎么能这样做
目前我正在尝试将表单浮动到右侧，但社交图标则从底部移动并位于屏幕左侧
我想将id：“myForm”和“info”并排放置 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current"><a href="Contact.html">ENQUIRIES</a></li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<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>
<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>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>
答案 0 :(得分：0)
你应该移动＆＃34; myForm＆＃34;除了＆＃34;信息＆＃34;像这样的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>
这些元素的CSS应该是这样的
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
答案 1 :(得分：0)
你在css中使用盒子模型来做到这一点，请在代码片段中查看下面的代码
@media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>