input type="text" 当以网格属性为中心时，网格项目正在缩小

Question

我试图使文本输入字段至少采用 div 形式的 90%（蓝色区域）并保持居中位置。

表单 div 是其父网格（主容器）中的一个网格。在表单 div 的 CSS 中，我将其内容设置为居中，但是输入字段因此缩小了。

谁能提出解决方案？

我想去掉任何用于居中内容的属性，只是将输入字段的宽度增加到 100%，同时增加表单的填充 div。

但我真的很固执地要将输入的宽度保持在 100% 以下。

*{
    box-sizing: border-box; 
}

#container {
    
    width: 90%;
    margin: auto;
    background: silver;
    padding: 20px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header"
    "content"
    "footer";

    justify-items: center;
}
#header {
    text-align: center;
    grid-area: header;
}

#survey-form {
    
    width: 70%;
    background: blue;
    padding: 30px;

    grid-area: content;
    display: grid;


}

.form-group {
    justify-self: center;
}

.form-group label{
display: block;
}

.form-group input[type="text"] {
    width: 90%;
    height: 30px;
    
    border-radius: 10px;

}

<!DOCTYPE html>
<htmL>
<head>
    <title>Survey Page</title>
    <link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>

<body>
    <div id="container">
        <header id="header">
            <h1 id="title">Take this survey</h1>
            <p id="description">Seriously just take it now while I think about the caption.</p>
        </header>

        <form id="survey-form">

        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Age</label>
            <input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
        </div>

        <footer>
            
        </footer>

        </form>
    </div>

</body>
</htmL>

Answer 1

希望这就是您要找的。

   *{
    box-sizing: border-box; 
}

#container {
    
    width: 90%;
    margin: auto;
    background: silver;
    padding: 20px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header"
    "content"
    "footer";

    justify-items: center;
}
#header {
    text-align: center;
    grid-area: header;
}

#survey-form {
    
    width: 70%;
    background: blue;
    padding: 30px;

    grid-area: content;
    display: grid;


}

.form-group {
    margin:auto;
    width:90%;
}

.form-group label{
display: block;
color:white;
}

.form-group input[type="text"],.form-group input[type="email"] {
    width: 100%;
    height: 30px;
    margin:auto;
    border-radius: 10px;

}

<!DOCTYPE html>
<htmL>
<head>
    <title>Survey Page</title>
    <link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>

<body>
    <div id="container">
        <header id="header">
            <h1 id="title">Take this survey</h1>
            <p id="description">Seriously just take it now while I think about the caption.</p>
        </header>

        <form id="survey-form">

        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Age</label>
            <input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
        </div>

        <footer>
            
        </footer>

        </form>
    </div>

input type="text" 当以网格属性为中心时，网格项目正在缩小

input type="text" grid items are shrinking when centered with grid properties

html

css

forms

grid

centering