【发布时间】：2022-01-19 21:09:11
【问题描述】：
这是一个基本表单网页的快照，而更改填充灰色背景的值并没有缩小。
我附上了一张 CSS 代码的图片。在那，我使用了 padding = 20px，但是在图像中只有顶部和底部的 padding 是 20px，左右的 padding 远远超出了。
我正在表单元素上应用样式。
这是完整的 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>
这是完整的 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;
}
【问题讨论】：
-
如果不显示有关此问题的一些代码，将很难提供任何帮助
-
是否可以显示 HTML 代码？您可以将表单放在 div 标签中并更改边距和填充，以便灰色背景缩小
-
我已经上传了整个 HTML 和 CSS 代码。