代码之家 › 专栏 › 技术社区 › 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.

推荐文章

PkDrew · 在结构定义中声明“alignas”关键字与结构定义的数组之间有什么区别吗?

1 年前

Rad · 点击下拉菜单按钮时,它会在框架内移动

1 年前

David Lytle · Javascript幻灯片对齐

1 年前

Hana.HD · 如何在flutter中更改listtile中标题和副标题的对齐方式?(从右到左)

1 年前

2 年前

CheeseFlavored · CSS-如何根据屏幕大小更改DIV的顺序?

2 年前

Riya · 如何将imageview放置在线性布局水平方向的右端

2 年前

Kris · 如何将视口外DIV与可见视口DIV完美对齐

2 年前

Ihsan Ahmad · 文本输入和复选框输入不对齐

2 年前

Dragynjump · 为什么对齐按钮中的项目会更改按钮的位置?

2 年前