PHP/HTML 表单中的复选框 alignment 问题
[英]Checkbox alignment issues within PHP/HTML form
问题描述
I am trying to edit a form I have used many times but now I need to add checkboxes for options and I cannot for the life of me get them to align correctly or figure out where the formatting needs to be changed.
我正在尝试编辑一个我使用过很多次的表单，但现在我需要为选项添加复选框，我无法让它们正确对齐或找出需要更改格式的位置。 I am not an expert at PHP, HTML, or CSS I was just tasked with this being in IT so I am learning as I am going.我不是 PHP、HTML 或 CSS 的专家，所以我只是在 IT 工作，所以我正在学习。 You guys have always came to my rescue on previous projects too and I am about a days worth deep into it with no changes.你们也总是在以前的项目中帮助我，我大约需要一天的时间深入研究它，没有任何变化。 Made the checkboxes red in the CSS just so I could make sure a change I made to them went.将 CSS 中的复选框设为红色，这样我就可以确保对它们所做的更改生效。
Basically want the checkboxes to look like this:基本上希望复选框看起来像这样：
Project needs: [] Photography [] Videography [] Resize项目需求：[] 摄影 [] 摄像 [] 调整大小
HTML: 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: 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;
}
2 个解决方案
解决方案1
1 2021-01-06 21:23:16
In your CSS, you have a label {} declaration that is affecting all labels, including the ones next to your input radios.在您的 CSS 中，您有一个label {}声明，该声明会影响所有标签，包括输入收音机旁边的标签。 It is making them float and that's why they mess up.它使它们漂浮，这就是它们搞砸的原因。
To fix it you need to add another declaration that cancels the float for the labels inside #checkboxes, like so:要修复它，您需要添加另一个声明，取消 #checkboxes 内标签的浮动，如下所示：
#checkboxes label {
float: none;
}
解决方案2
0 2021-01-06 21:53:32
You have to set the label CSS properties like that:您必须像这样设置 label CSS 属性：
label {
float: left;
text-align: right;
margin-right: 15px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
And add another CSS line:并添加另一条 CSS 行：
.checkboxes input { float:left; vertical-align:middle; margin-right:10px; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.