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

时间：2019-03-15 18:08:53

标签： html css

大家好。我目前正在用html和CSS制作表单。我尝试在Internet上进行研究，但是以某种方式存在的代码会导致我的文本框丢失其设计并看上去很普通，或者会非常难看。

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

  2. 我还希望使“提交”和“重置”按钮在中间居中对齐。

  3. 和单选按钮使它们成一条直线，而不是分开2行。

当我删除选择的类.firstform的代码时，键入，我失去了文本框的设计属性，但是按钮设法对齐了。 

 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>

4 个答案:

答案 0 :(得分：0)

我建议针对此类问题调查flexbox。它使您能够完全灵活地对齐元素。在这里您可以找到很好的解释：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 1 :(得分：0)

这里有3个问题，用于解决问题

  1. 您已将<input>封闭在<label>内。将其移出，关闭</label>，然后启动<input>

  2. 删除输入的margin-left

  3. 显示：inline-block; width: 50%;到标签

所以您的代码现在看起来像这样：

enter image description here

jsfiddle：https://jsfiddle.net/vg3ts1m0/3/ jsfiddle（全屏）：https://jsfiddle.net/vg3ts1m0/3/show

我已经编辑了其中的前几个项目。它将为您提供有关如何进行的想法。

我希望它会有所帮助。

答案 2 :(得分：0)

正在工作的小提琴：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都可以解决此问题。

答案 3 :(得分：0)

  
      

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

    // Layout will resolve 90% of vertical alignment issues.
// To unify form controls (ex. `<input>`, `<select>`, etc) apply the following
input, select, label {display: inline-block; font: inherit}
         

    2.   

  2. 我还想使“提交”和“重置”按钮在中间居中对齐。

    /* 
Wrap the buttons in a block element (ex. `<fieldset>`, `<div>`, etc) 
and center the block
*/
fieldset {width: fit-content; margin: 0 auto}
<fieldset><input type='reset'><input type='submit'></fieldset>
    3.   

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

    /* 
Dimensions should be adjusted as a square (ex. width:4vw; height:4vh;)
The following styles align everything vertically. Keep the height and 
line-height the same. 
*/
[type=radio] {height: 5vh; line-height: 5vh; vertical-align: middle}
    4.   

内在长度（vw和vh）用于使整个表格具有响应性（请参阅整页演示中的演示）。  

演示

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font: 700 5vh/1.1 Verdana;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

form {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
}

fieldset {
  padding: 5px;
  margin: 1vh auto;
  border-radius: 6px;
}

.set1>legend {
  margin-bottom: -7px
}

legend {
  margin-top: 10px;
}

legend+hr {
  width: 30vw;
}

[type=radio] {
  width: 4vw;
  height: 4vh;
}

input,
select,
label {
  display: inline-block;
  font: inherit;
  margin: 2vh 0 0 0;
  height: 6vh;
  line-height: 6vh;
  vertical-align: middle;
  padding: 1px 2px;
  border-radius: 4px;
}

#first,
#last {
  width: 77vw;
}

#dob {
  width: 33vw
}

.set2 label {
  min-width: 9vw;
}

.set3 label {
  min-width: 10vw;
}

#male {
  margin-left: 3vw;
}

label[for=nationality] {
  width: 19vw
}

#nationality {
  height: 8vh;
  line-height 8vh;
}

#address {
  width: 71vw;
}

#state {
  width: 25vw;
}

#email {
  width: 75vw;
}

[type=number],
[type=tel],
[type=date] {
  font-family: Consolas;
  font-size: 6vh
}

[type='reset'],
[type='submit'] {
  width: 15vw;
  height: 8vh;
  cursor: pointer;
}

[type=submit] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin: 0 0 0 -3px;
  padding: 0 0 2px 0;
}

[type=reset] {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  margin: 0 0 0 -3px;
  padding: 0 0 2px 0;
}

.set4 {
  padding: 4px;
  width: fit-content;
  margin: 0px auto;
}

hr {
  margin-top: 8px;
}
<form id='main'>
  <fieldset name='set1' class='set1 set'>
    <legend>Student Registration</legend>
    <hr>
    <fieldset name='set2' class='set2 set'>
      <legend>Personal Information</legend>
      <label for='first'>First: </label>
      <input id='first' name='first' type='text'><br>
      <label for='last'>Last: </label>
      <input id='last' name='last' type='text'><br>
      <label for='dob'>DOB: </label>
      <input id='dob' name='dob' type='date'>
      <input id='male' name='gender' type='radio' value='male'><label for='male'>&nbsp;Male&nbsp;&nbsp;</label>&nbsp;
      <input id='female' name='gender' type='radio' value='female'><label for='female'>&nbsp;Female</label> <br>
      <label for='nationality'>Nationality: </label>
      <select id='nationality' name='nationality'>
        <option value=''>---------------------------</option>
        <optgroup label='North America'>
          <option value='US'>American</option>
          <option value='CA'>Canadian</option>
          <option value='MX'>Mexican</option>
        </optgroup>
        <optgroup label='South America'>
          <option value='BR'>Brazilian</option>
          <option value='CR'>Costa Rican</option>
          <option value='PR'>Peruvian</option>
        </optgroup>
        <optgroup label='Asia'>
          <option value='CN'>Chinese</option>
          <option value='JP'>Japanese</option>
          <option value='IN'>Indian</option>
        </optgroup>
        <optgroup label='Europe'>
          <option value='GB'>British</option>
          <option value='DE'>German</option>
          <option value='FI'>Finnish</option>
        </optgroup>
        <optgroup label='Africa'>
          <option value='NG'>Nigerian</option>
          <option value='EG'>Egyptian</option>
          <option value='ML'>Malian</option>
        </optgroup>
        <option value='AU'>Australian</option>
      </select>
    </fieldset>
    <hr>
    <fieldset name='set3' class='set3 set'>
      <legend>Contact Information</legend>
      <label for='address'>Address: </label>
      <input id='address' name='address' type='text'><br>
      <label for='state'>State: </label>
      <input id='state' name='state' list='states'>
      <datalist id="states">
      <option value="California">
      <option value="Oregon">
      <option value="Washington">
      <option value="Nevada">
      <option value="Arizona">
    </datalist>
      <label for='zipcode'>Zip Code: </label>
      <input id='zipcode' name='zipcode' type='number' min='85000' max='98999'><br>
      <label for='email'>Email: </label>
      <input id='email' name='email' type='email'><br>
      <label for='tel'>Telephone: </label>
      <input id='tel' name='tel' type='tel'>
    </fieldset>
    <fieldset name='set4' class='set4 set'>
      <input type='submit'>
      <input type='reset'>
    </fieldset>
  </fieldset>
</form>

相关问题
最新问题