html - 将标签与输入类型文本对齐

Question

大家好。我目前正在用 html 和 css 做一个表单。我尝试在互联网上进行研究，但不知何故，那里的代码要么会导致我的文本框失去其设计并看起来很普通，要么会非常难看。

1. 我正在尝试将文本框与标签对齐，以使其看起来整洁。

2. 我还想让提交按钮和重置按钮在彼此相邻的中心对齐。

3. 还有单选按钮使它们排成一条直线，而不是分成两行。

当我删除类 .firstform select, type 的代码时，我失去了文本框的设计属性，但按钮设法对齐。

 body {
          background: url(ewp.jpg);
          background-size: cover;
        }
        
        .firstform {
          order-radius: 5px;
          background: green;
          padding: 20px;
          width: 550px;
          margin: auto;
          color: #fff;
          font-size: 16px;
          font-family: verdana;
          margin-top: 100px;
          opacity: 0.8;
        }
        
        .firstform h1 {
          text-align: center;
          margin: 0;
          padding: 0;
        }
        
        .firstform input,
        select {
          width: 50%;
          padding: 12px 20px;
          margin-left: 16em;
          display: inline-block;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
          font-size: 18px;
          background: black;
          color: white;
          opacity: 0.9;
        }
        
        .container {
          display: block;
          position: relative;
          padding-left: 25px;
          margin-bottom: 12px;
          margin-left: 24em;
          cursor: pointer;
          font-size: 12px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        
        /* Hide browser default radio button */
        .container input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
        }
        
        /* Create custom radio button */
        .checkmark {
          position: absolute;
          top: 0;
          left: 0;
          height: 15px;
          width: 15px;
          background-color: #eee;
          border-radius: 50%;
        }
        
        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
          background-color: #ccc;
        }
        
        /* When the radio button is checked, add a blue background */
        .container input:checked ~ .checkmark {
          background-color: #2196f3;
        }
        
        /* Create the indicator (the dot/circle - hidden when not checked) */
        .checkmark:after {
          content: "";
          position: absolute;
          display: none;
        }
    
    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }
    
    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
      top: 6px;
      left: 6px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: white;
    }
    
    .buttonHolder {
      display: block;
      margin: 0 auto;
    }
    
    .firstform input[type="submit"]:hover {
      background: #45a049;
      transparent: 0.6s;
    }
    
    .firstform input[type="reset"]:hover {
      background: #45a059;
      transparent: 0.6s;
    }




	

<div class="firstform">
			<h1>Student Registration Form</h1>
	<form action="Form1.php" method="post">
	
		<p><label>First Name: <input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
		<p><label>Last Name: <input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
		<p><label>Age: <input type="number" name= "age" min="0" max="150"></label></p>
		<p><label> Date of Birth:<input type="date" name="date"></label></p>

        <p>Gender: 
			<label class="container">
				<input type="radio" name="gender" value="Male">Male
                <span class="checkmark"></span>
			</label>

			<label class="container">
				<input type="radio" name="gender" value="Female">Female
                <span class="checkmark"></span>			
			</label>
	
		</p>      


		<p> Nationality:
			<label>
				<select name="nationality">
					<option selected>Malaysia</option>
					<option>Bangladesh</option>
					<option>India</option>
					<option>African Nations</option>
					<option>South East Asia nations</option>
					<option>others</option>
				</select>
			</label>

		</p>

		<p><label>Address:<input type="text" name="address" size="30" /></label></p>

		<p><label>Postcode: <input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
		<p><label>State:
				<input name="state" list="state">

				<datalist id="state">
					<option value="Selangor">
					<option value="Kuala Lumpur">
					<option value="Kelantan">
					<option value="Johor">
					<option value="Malacca">
					<option value="Perak">
					<option value="Pahang">
					<option value="Negeri Sembilan">
					<option value="Sabah">
					<option value="Sarawak">
					<option value="Perlis">
					<option value="Kedah">
					<option value="Terengganu">
					<option value="Penang">
				</datalist>
		</label></p>
		
		<p>
			<label>Email:
				<input type="email" name="email">
			</label>
		</p>

		<p>
			<label> Tel:
				<input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
			</label>	
		</p>

		<div class="buttonHolder">
			<input type="submit" name="Insert">
			<input type="reset" name="Clear">
		</div>
	
	</form>	
	</div>
	

Answer 1

工作 fiddle :https://jsfiddle.net/jennifergoncalves/nut5mzgj/10/

body {
  background: url(ewp.jpg);
  background-size: cover;
}

.firstform {
  order-radius: 5px;
  background: green;
  padding: 20px;
  width: 550px;
  margin: auto;
  color: #fff;
  font-size: 16px;
  font-family: verdana;
  margin-top: 100px;
  opacity: 0.8;
}

.firstform h1 {
  text-align: center;
  margin: 0;
  padding: 0;
}

.firstform input,
select {
  width: 50%;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
  background: black;
  color: white;
  opacity: 0.9;
  /* removed margin-left */
}

.container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  margin-left: 24em;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide browser default radio button */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: #2196f3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */

.container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
}

.buttonHolder {
  display: block;
  margin: 0 auto;
}

.firstform input[type="submit"]:hover {
  background: #45a049;
  transparent: 0.6s;
}

.firstform input[type="reset"]:hover {
  background: #45a059;
  transparent: 0.6s;
}

label > span, p > span {
  width: 50%;
  display: inline-block;
}

<div class="firstform">
  <h1>Student Registration Form</h1>
  <form action="Form1.php" method="post">

    <p><label><span>First Name: </span><input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
    <p><label><span>Last Name: </span><input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
    <p><label><span>Age: </span><input type="number" name= "age" min="0" max="150"></label></p>
    <p><label><span>Date of Birth:</span><input type="date" name="date"></label></p>

    <p><span>Gender:</span>
      <label class="container">
            <input type="radio" name="gender" value="Male">Male
            <span class="checkmark"></span>
        </label>

      <label class="container">
            <input type="radio" name="gender" value="Female">Female
            <span class="checkmark"></span>         
        </label>

    </p>


    <p><label><span>Nationality:</span><select name="nationality">
                <option selected>Malaysia</option>
                <option>Bangladesh</option>
                <option>India</option>
                <option>African Nations</option>
                <option>South East Asia nations</option>
                <option>others</option>
            </select>
        </label>

    </p>

    <p><label><span>Address:</span><input type="text" name="address" size="30" /></label></p>

    <p><label><span>Postcode: </span><input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
    
    <p><label><span>State:</span><input name="state" list="state">
            <datalist id="state">
                <option value="Selangor">
                <option value="Kuala Lumpur">
                <option value="Kelantan">
                <option value="Johor">
                <option value="Malacca">
                <option value="Perak">
                <option value="Pahang">
                <option value="Negeri Sembilan">
                <option value="Sabah">
                <option value="Sarawak">
                <option value="Perlis">
                <option value="Kedah">
                <option value="Terengganu">
                <option value="Penang">
            </datalist>
    </label></p>

    <p>
      <label><span>Email:</span><input type="email" name="email">
        </label>
    </p>

    <p>
      <label><span>Tel:</span><input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
        </label>
    </p>

    <div class="buttonHolder">
      <input type="submit" name="Insert"><input type="reset" name="Clear">
    </div>

  </form>
</div>

问题是您在输入的左侧有边距。这阻止了元素内联，因为它增加了所需的水平空间。

其次，您的输入在您的标签内。这是很好的做法，因为您可以避免使用 for 属性来实现可访问性。但是，您不能只定位标签，所以我用 span 包围了实际的标签文本。现在您可以只定位实际的标签文本。将此设置为 50% 并将输入设置为 50% 并在两者上使用 display:inline-block 将解决此问题。