听起来很简单，也许是。 Here is a form I am currently working on，我想将lastName直接放在firstName旁边。
这就是我所拥有的。
body {
background: #384047;
font-family: sans-serif;
font-size: 10px;
}
form {
background: #fff;
padding: 3em 2em 2em;
max-width: 350px;
margin: 100px auto 0;
box-shadow: 0 0 1em #222;
border-radius: none;
}
p {
margin: 0 0 2em 0;
position: relative;
}
#moreInfo {
font-size: 2em;
position: relative;
text-align: center;
}
/* Drop-down menu's */
#dropDown1 {
width: 350px;
color: grey;
padding: 0.5em 0.5em;
background: f5f5f5;
border: 1px solid #e5e5e5;
}
#dropDown2 {
width: 350px;
padding: 0.5em 0.5em;
color: grey;
background: f5f5f5;
border: 1px solid #e5e5e5;
}
label {
display: block;
font-size: 1.4em;
margin: 0 0 0.5em;
color: #333;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
outline: none;
}
#firstName {
background: f5f5f5;
border: 1px solid #e5e5e5;
font-size: 1em;
padding: 0.2em 0.2em;
width: 150px;
border-radius: 5px;
}
#lastName {
background: f5f5f5;
border: 1px solid #e5e5e5;
font-size: 1em;
padding: 0.2em 0.2em;
width: 150px;
border-radius: 5px;
}
#eMail {
background: f5f5f5;
border: 1px solid #e5e5e5;
font-size: 1em;
padding: 0.2em 0.2em;
border-radius: 5px;
}
#telephone {
background: f5f5f5;
border: 1px solid #e5e5e5;
font-size: 1em;
width: 150px;
padding: 0.2em 0.2em;
border-radius: 5px;
}
#address {
background: f5f5f5;
border: 1px solid #e5e5e5;
font-size: 0.8em;
padding: 8px;
border-radius: 5px;
}
/* buttons */
#submitMore {
background: #2080df;
box-shadow: none;
border-radius: 2px;
border: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 2em;
line-height: 1.6em;
margin: 1em 0 0;
outline: none;
padding: 1em 0;
text-shadow: 0 1px #68b25b;
}
#applyNow {
background: #40bf80;
box-shadow: none;
border-radius: 2px;
border: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 2em;
line-height: 1.6em;
margin: 2em 0 0;
outline: none;
padding: 1em 0;
text-shadow: 0 1px #68b25b;
}
#para1 {
text-align: left;
color: #dadada;
padding: ;
}
#OReo {
text-align: center;
color: #dadada;
font-size: 1em;
}
.alert {
display: none;
font-size: .5em;
}
/* Validation Form Response */
.error {
color: #e74c3c;
font-size: .5em;
}<body>
<form action="#" method="post">
<!-- drop-down -->
<h1 id="moreInfo">Request More Information</h1>
<p>
<label for="degreeType">What degree type would you like?*</label>
<select id="dropDown1" name="dropDown1">
<option id="dropDown1" selected="selected">Select</option>
<option value="gen2">Example 1</option>
<option value="gen3">Example 2</option>
<option value="gen4">Example 3</option>
</select>
</p>
<p>
<label for="selectDegree">What would you like to study?*<label>
<select id="dropDown2" name="dropDown2">
<option selected="selected">Select degree type above</option>
<option value="gen2">Example 1</option>
<option value="gen3">Example 2</option>
<option value="gen4">Example 3</option>
</select>
</p>
<div class="firstNlast">
<p>
<label for="firstName">First Name*<label>
<input id="firstName" name="firstName" type="firstName">
<span class="left"></span>
</p>
<p>
<label for="lastName">Last Name*<label>
<input id="lastName" name="lastName" type="lastName">
</p>
</div>
<p>
<label for="eMail">Email*<label>
<input id="eMail" name="eMail" type="text">
<span class="left"></span>
</p>
<p>
<label for="telephone">Telephone*<label>
<input id="telephone" name="telephone" type="text">
<span class="right"></span>
</p>
<p>
<label for="address">Address*<label>
<input id="address" name="address" type="text" placeholder="Enter a location">
<span class="left"></span>
</p>
<p>
<input type="submit" value="Tell Me More" id="submitMore">
</p>
<p id="para1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices pulvinar scelerisque. Curabitur auctor faucibus est, ut lobortis ante tempus sit amet. Phasellus fermentum aliquet turpis, at tempus tortor euismod nec. Pellentesque ligula nunc, maximus et venenatis ac, tempor vel sem.
</p>
<h1 id="OReo">---------- OR -------------</h1>
<input type="submit" value="Apply Now" id="applyNow">
<form action="#" method="post">
<div class="panel-body">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Successfully submitted!</strong> The form is valid.
</div>最佳答案
只需添加
.firstNlast p {
width: 50%;
float: left;
}
关于html - 将段落元素移动到另一个段落元素旁边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49961568/