英文:
Text and checkbox input not aligned
问题
我试图创建一个表单，所以我添加了一些文本输入字段和复选框字段，但似乎文本字段和复选框字段没有对齐。
我尝试了一些在线资源，但徒劳无功。
这是我的代码：
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
max-width: 80%;
background-color: rgb(19, 131, 206);
padding: 34px;
margin: auto;
}
.container h3 {
text-align: center;
}
input, textarea {
width: 80%;
display: block;
margin-bottom: 10px;
}
.container input[type="checkbox"] {
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>WELCOME TO DIU QUIZ HUB</h3>
<form action="index.php" method="post">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="student_id" id="student_id" placeholder="Enter Your Student ID number">
<input type="email" name="email" id="email" placeholder="Enter Your edu mail">
<input type="password" name="password" id="password" placeholder="Enter Your Password">
<textarea name="reason" id="reason" cols="30" rows="10" placeholder="Why you want to join?"></textarea>
<input type="checkbox" name="check_box" id="check_box">Check me
<br>
<button class="btn">Submit</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
英文:
I was trying to create a form, so I put some text input field and checkbox field. but it seems text fields and checkbox fields are not aligned.
I tried some online resources but in vain.
Here is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
max-width: 80%;
background-color: rgb(19, 131, 206);
padding: 34px;
margin: auto;
}
.container h3 {
text-align: center;
}
input, textarea {
width: 80%;
display: block;
margin-bottom: 10px;
}
.container input[type="checkbox"] {
display: inline-block;
vertical-align: middle;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>WELCOME TO DIU QUIZ HUB</h3>
<form action="index.php" method="post">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="student_id" id="student_id" placeholder="Enter Your Student ID number">
<input type="email" name="email" id="email" placeholder="Enter Your edu mail">
<input type="password" name="password" id="password" placeholder="Enter Your Password">
<textarea name="reason" id="reason" cols="30" rows="10" placeholder="Why you want to join?"></textarea>
<input type="checkbox" name="check_box" id="check_box">Check me
<br>
<button class="btn">Submit</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
<!-- end snippet -->
I am new to dev and to stackOverflow too.
答案1
得分: 0
你已将所有输入框，包括复选框的宽度设为80%。因此，您还需要像这样样式化复选框：
input[type="checkbox"] {
width:auto;
margin:-2px 5px 0 0;
}
这样您将重置其宽度并添加一些有用的边距。
英文:
You have set the width - 80% for all inputs, including checkbox. So additionally you need to stylise the checkbox like that:
input[type="checkbox"] {
width:auto;
margin:-2px 5px 0 0;
}
Thus you'll reset its width and add some helpful margins
答案2
得分: 0
谢谢 @GL.awog
.container input[type="checkbox"]{
width:auto;
margin:-2px 5px 0 0;
display: inline-block;
vertical-align: middle;
}
这有帮助 <3
英文:
Thanks @GL.awog
.container input[type="checkbox"]{
width:auto;
margin:-2px 5px 0 0;
display: inline-block;
vertical-align: middle;
}
this helped <3
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论