[英]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.