#html #css #forms #grid #centering
#HTML #css — код #формы #сетка #центрирование
Вопрос:
Я пытаюсь сделать так, чтобы поля ввода текста занимали не менее 90% формы div (синяя область) и оставались в положении по центру.
Форма div представляет собой сетку внутри ее родительской сетки, основного контейнера. Именно в CSS для div формы я устанавливаю центрирование ее содержимого, однако в результате поля ввода уменьшаются.
Кто-нибудь может предложить какие-либо решения?
Я думал избавиться от любых свойств для центрирования содержимого и просто увеличить ширину полей ввода до 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> Ответ №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>