代码之家 › 专栏 › 技术社区 › Ihsan Ahmad

文本输入和复选框输入不对齐

alignment checkbox css

Ihsan Ahmad · 技术社区 · 2 年前

我试图创建一个表单,所以我放置了一些文本输入字段和复选框字段。但文本字段和复选框字段似乎没有对齐。

我尝试了一些在线资源,但没有成功。

这是我的代码:

* {
    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>

我是开发人员和stackOverflow的新手。

2 回复 | 直到 2 年前

GL.awog 2 年前

您已经为所有输入设置了宽度-80%,包括复选框。因此,您还需要对复选框进行样式化处理,如下所示:

input[type="checkbox"] {
  width:auto;
  margin:-2px 5px 0 0;
}

因此,您将重置其宽度并添加一些有用的边距

Ihsan Ahmad 2 年前

谢谢@GL.awog

.container input[type="checkbox"]{
    width:auto;
    margin:-2px 5px 0 0;
    display: inline-block;
    vertical-align: middle;
}

这有助于<3.

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

4 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

4 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

4 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

4 年前

Alex · 引导对齐表单开关左侧的标签

4 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

8 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

8 年前

Kais · 带有输入复选框的表格选中/取消选中

8 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

8 年前

yuggmeister · 如何使自定义复选框可访问?

8 年前