无法将文本和复选框放在同一行

Question

我是网络开发的初学者，我有一个注册表单，其中有一个复选框可以单击以记住您的帐户。但是，我的复选框位于“记住我的文本”下方，而不是旁边。这显然是我的 CCS 的问题，我还没有找到。我的提交和取消按钮在我的表单中也可能是因为复选框问题。 感谢您帮助我解决这个问题。先感谢您 。 我的代码：

.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
	
	
}

.imgcontainer img{
    height: 100px; /* set a default height*/
    margin-top: -75px; /* move image up fo 75px */
    border: 1px solid black; /* define a border */
    border-radius: 50%; /* make the image rounded, this works only with square images*/
	
}

.imgcontainer{
    display: flex; /* change display */
    justify-content:center;/* align to the center the image */
    /* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}



h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
		
}	

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
		
}	

.form-area input,select{

margin-bottom:20px;
width:100%;	
	
	
}	

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;	
outline:none;
height:40px;
color:#ffffff;
display:16px;
	
	
}	


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 



span{

color:white;	
	
}	

::placeholder{
	
color:#ffffff	
	
}	



.form-area select{
	
margin-top:20px;
padding:10px 0;
	
	
}	


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;	
border-radius:20px;	
	
	
}	


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;	
border-radius:20px;	
	
	
}	



button:hover{
	
opacity:0.7;	
	
	
}	

//my full form 
<div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 
    <div class="imgcontainer">
       <img src="IMAGES/circleman.png" alt ="avatar" class = "Avatar">    
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
	 
	 
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
	
	
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

    <label for="psw-repeat"><b><span>Repeat Password</span></b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat"  id = "passagain" required>
    
    //this is the issue 
    
    <label for "checkbox"><span>Remember me</span> </label>
    <input type="checkbox" value="remember-me" id="remember_me">

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
	
   </div>
   
 </form>

 </div>

Answer 1

出现错误是因为所有标签都是 100% 宽度。我为复选框类添加了具有自动宽度的新类 css。

input#remember_me{
width:auto;
}

.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
	
	
}

.imgcontainer img{
    height: 100px; /* set a default height*/
    margin-top: -75px; /* move image up fo 75px */
    border: 1px solid black; /* define a border */
    border-radius: 50%; /* make the image rounded, this works only with square images*/
	
}

.imgcontainer{
    display: flex; /* change display */
    justify-content:center;/* align to the center the image */
    /* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}



h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
		
}	

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
		
}	

.form-area input,select{

margin-bottom:20px;
width:100%;	
	
	
}	

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;	
outline:none;
height:40px;
color:#ffffff;
display:16px;
	
	
}	


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 



span{

color:white;	
	
}	

::placeholder{
	
color:#ffffff	
	
}	



.form-area select{
	
margin-top:20px;
padding:10px 0;
	
	
}	


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;	
border-radius:20px;	
	
	
}	


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;	
border-radius:20px;	
	
	
}	



button:hover{
	
opacity:0.7;	
	
	
}

input#remember_me{
width:auto;

}

//my full form 
<div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 
    <div class="imgcontainer">
       <img src="IMAGES/circleman.png" alt ="avatar" class = "Avatar">    
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
	 
	 
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
	
	
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

    <label for="psw-repeat"><b><span>Repeat Password</span></b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat"  id = "passagain" required>
    

    <div>
    <label for "checkbox"><span>Remember me</span> </label>
    <input type="checkbox" value="remember-me" id="remember_me">
    </div>
    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
	
   </div>
   
 </form>

 </div>

Answer 2

这可以使用 css flexbox 来解决。在这里，我为标签和复选框添加了一个包装类，并设置为 display: flex;

.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
	
	
}

.imgcontainer img{
    height: 100px; /* set a default height*/
    margin-top: -75px; /* move image up fo 75px */
    border: 1px solid black; /* define a border */
    border-radius: 50%; /* make the image rounded, this works only with square images*/
	
}

.imgcontainer{
    display: flex; /* change display */
    justify-content:center;/* align to the center the image */
    /* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}



h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
		
}	

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
		
}	

.form-area input,select{

margin-bottom:20px;
width:100%;	
	
	
}	

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;	
outline:none;
height:40px;
color:#ffffff;
display:16px;
	
	
}	


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 



span{

color:white;	
	
}	

::placeholder{
	
color:#ffffff	
	
}	



.form-area select{
	
margin-top:20px;
padding:10px 0;
	
	
}	


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;	
border-radius:20px;	
	
	
}	


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;	
border-radius:20px;	
	
	
}	



button:hover{
	
opacity:0.7;	
	
	
}

.checkbox-wrap {
  display: flex;
}

.checkbox-wrap input {
  width: auto;
}

<div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 
    <div class="imgcontainer">
       <img src="IMAGES/circleman.png" alt ="avatar" class = "Avatar">    
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
	 
	 
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
	
	
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

    <label for="psw-repeat"><b><span>Repeat Password</span></b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat"  id = "passagain" required>
  
   <div class="checkbox-wrap"> 
    <label for "checkbox"><span>Remember me</span> </label>
    <input type="checkbox" value="remember-me" id="remember_me">
</div>
    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
	
   </div>
   
 </form>

 </div>