在表单元素中应用填充时出现问题
[英]Trouble while applying padding in form element
问题描述
This is a snapshot of a basic form webpage, while changing the values of padding the gray background is not shrinking.
这是一个基本表单网页的快照，而更改填充灰色背景的值并没有缩小。
I have attached an image of the CSS code.我附上了 CSS 代码的图像。 In that, I am using padding = 20px, but in the image only top and bottom padding is 20px, left and right padding is much beyond.在那，我使用 padding = 20px，但在图像中只有顶部和底部填充是 20px，左右填充远远超出。
I am applying styling on form element.我在表单元素上应用样式。
Here is the complete HTML code:这是完整的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>StartUp survey form</title>
</head>
<body>
<h1 id="title">StartUp survey form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<div>
<label for="name" id="name-label">Name<br>
<input id="name" placeholder="Enter your name" type="text">
<br>
</label>
<label for="email" id="email-label">Email<br><input id="email" type="email" placeholder="Enter your Email"><br></label>
<label for="number" id="number-label">Age(optional)<br><input id="number" type="number" min="20" max="60" placeholder="Age"><br></label>
<label for="dropdown">Which option best describes your current role?<br>
<select id="dropdown" name="dropdown list option">
<option value="select current role" selected="true" disabled="disabled">Select current role</option>
<option value="student">Student</option>
<option value="full time job">Full Time Job</option>
<option value="full time learner">Full Time Learner</option>
<option value="prefer not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
<br></label>
<p>Would you recommend StartUp to a friend ?
</p>
<input type="radio" name="radio" value="definitely">
<label>Definitely<br></label>
<input type="radio" name="radio" value="maybe">
<label>Maybe<br></label>
<input type="radio" name="radio" value="not sure">
<label>Not Sure<br></label>
<label>
Which is your favourite feature of StartUp?<br>
<select id="dropdown" name="dropdown list option ff">
<option value="select an option" selected="true" disabled="disabled">Select and option</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open source">Open Source</option>
</select>
</label>
<p>What would you like to seeimproved? (Check all that apply)</p>
<input type="checkbox" value="fep">
<label>Front-end Projects<br></label>
<input type="checkbox" value="bep">
<label>Back-end Projects<br></label>
<input type="checkbox" value="dv">
<label>Data Visualization<br></label>
<input type="checkbox" value="c">
<label>Challenges<br></label>
<input type="checkbox" value="osc">
<label>Open Source Community<br></label>
<input type="checkbox" value="ghr">
<label>Gitter help rooms<br></label>
<input type="checkbox" value="v">
<label>Videos<br></label>
<input type="checkbox" value="cm">
<label>City Meetups<br></label>
<input type="checkbox" value="w">
<label>Wiki<br></label>
<input type="checkbox" value="f">
<label>Forum<br></label>
<input type="checkbox" value="ac">
<label>Additional Courses<br></label>
<label>Any comments or suggestions?<br>
<input type="text" placeholder="comment">
</label>
<label><br><button type="button">Submit</button>
</label>
</div>
</form>
</body>
</html>
Here is the complete CSS code:这是完整的 CSS 代码：
body{
background-image: url(background.jpg);
text-align: center;
padding: 0px;
}
h1{
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(216, 213, 28);
margin-top: 40px;
margin-bottom: 0px;
}
#description{
font-family: cursive;
margin-top: 10px;
font-size: 20px;
color: rgb(231, 224, 224);
}
form{
background-color: rgba(99, 98, 100, 0.9);
border-radius: 5px;
padding: 20px;
}
3 个解决方案
解决方案1
0 2021-12-16 19:48:55
The content should really be in a div tag, also if you want the grey background to be smaller you should use a margin:内容实际上应该在 div 标签中，如果您希望灰色背景更小，您应该使用边距：
form {
margin: 20px 20px 20px 20px;
}
This will apply margin in the following way: Top, Right, Bottom, Left这将以下列方式应用边距：上、右、下、左
解决方案2
0 2021-12-16 19:49:43
Make sure you're using box-sizing: border-box;确保您使用的是box-sizing: border-box; and your body or any other container class is having max-width:100%;并且您的身体或任何其他容器 class 的max-width:100%;
*, ::after, ::before {
box-sizing: border-box;
}
解决方案3
-1 已采纳 2021-12-17 05:16:33
margin: Top Right Bottom Left;
body { padding: 20px 20px 20px 20px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.