[英]Checkbox alignment issues within PHP/HTML form
我正在尝试编辑一个我使用过很多次的表单,但现在我需要为选项添加复选框,我无法让它们正确对齐或找出需要更改格式的位置。 我不是 PHP、HTML 或 CSS 的专家,所以我只是在 IT 工作,所以我正在学习。 你们也总是在以前的项目中帮助我,我大约需要一天的时间深入研究它,没有任何变化。 将 CSS 中的复选框设为红色,这样我就可以确保对它们所做的更改生效。
基本上希望复选框看起来像这样:
项目需求:[] 摄影 [] 摄像 [] 调整大小
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Marketing and Communications Request</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="marketing_style.css" />
</head>
<body>
<center>
<br /><br /><img src="logo.jpg" width="350px" height"100px"><br /><br />
<H1>Marketing and Communications Request</H1>
</center>
<div id="page-wrap">
<div id="contact-area">
<br />
<br />
<form method="post" action="marketing_contactengine.php">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Phone">Phone:</label>
<input type="text" name="Phone" id="Phone" />
<label for="Dept">Department:</label>
<input type="text" name="Dept" id="Dept" />
<label for="Dir">Department Director:</label>
<input type="text" name="Dir" id="Dir" />
<label for="COID">COID/Account Code (GL Code):</label>
<input type="text" name="COID" id="COID" />
<br><br>
<br><br>
<h2><u>EVENT INFORMATION</u></h2>
<label for="EventName">Event Name:</label>
<input type="text" name="EventName" id="EventName" />
<label for="EventDateTime">Event Date & Time:</label>
<input type="text" name="EventDateTime" id="EventDateTime" placeholder="01/01/2021 08:00:00" />
<label for="EventLocation">Event Location:</label>
<input type="text" name="EventLocation" id="EventLocation" />
<label for="Desc">Brief description of the event:</label><br />
<textarea name="Desc" rows="2" cols="10" id="Desc"></textarea>
<br><br>
<br><br>
<h2><u>PROJECT INFORMATION</u></h2>
<label for="ProjectName">Project Name:</label>
<input type="text" name="ProjectName" id="ProjectName" />
<label for="Materials">Materials due date:</label>
<input type="text" name="Materials" id="Materials" />
<br />
</div>
<div id="checkboxes" class="checkboxes">
<label id="ProjectNeeds" for="ProjectNeeds" class="checkboxes">Project needs (check all that apply):</label>
<label class="checkboxes" for="Photography"><input type="checkbox" id="Photography" /> <span>Photography</span></label>
<label class="checkboxes" for="Videography"><input type="checkbox" id="Videography" /> <span>Videography</span></label>
<label class="checkboxes" for="Resize"><input type="checkbox" id="Resize" /> <span>Resize</span></label>
</div>
</div>
</div>
<div id="bottom" style="position: relative;">
<div style="position: absolute;">
Submission of this form is required for all requests to the marketing and communications team.
</div>
</body>
</html>
CSS:
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
background: white;
padding: 20px 50px 20px 50px;
min-height: 500px;
height: auto !important;
height: 500px;
width: 700px;
}
#contact-area {
width: 660px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 10px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
/* border: 2px solid #ccc; */
}
/* #contact-area textarea { */
/* height: 90px; */
/* } */
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
#bottom {
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 0px 100px;
width: 900px;
padding-top: 75px;
padding-bottom: 75px;
text-align: left;
}
#checkboxes {
color: red;
}
在您的 CSS 中,您有一个label {}
声明,该声明会影响所有标签,包括输入收音机旁边的标签。 它使它们漂浮,这就是它们搞砸的原因。
要修复它,您需要添加另一个声明,取消 #checkboxes 内标签的浮动,如下所示:
#checkboxes label {
float: none;
}
您必须像这样设置 label CSS 属性:
label {
float: left;
text-align: right;
margin-right: 15px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
并添加另一条 CSS 行:
.checkboxes input { float:left; vertical-align:middle; margin-right:10px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.