Question

听起来很简单，很可能。 Here is a form I am currently working on并且我希望将lastName直接放在firstName旁边。

这就是我所拥有的。

＆＃13;

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

＆＃13;

<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">&times;</a>
        <strong>Successfully submitted!</strong> The form is valid.
      </div>

＆＃13;

Answer 1

添加

.firstNlast p {
  width: 50%;
  float: left;
}

将段落元素移动到另一个段落元素旁边

1 个答案: