听起来很简单，而且可能确实如此。 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/