我有一个表单在 DIV 标签结束之前没有结束。它在 CSS 和 HTML 验证器中验证良好，但我对某些字段的 CSS 有疑问。如果您看到 HTML，我已将表单分成两列。 form 和 fieldset 标签从左栏开始，在右栏结束。出于某种原因，CSS 似乎不适用于正确列中的字段。
This SO Question and it's answers没有解决我的问题的方法。
这是 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/new.css" type="text/css" media="all">
</head>
<body>
<div class="container_24">
<article id="content">
<ul>
<li id="Shipping">
<div class="wrapper baseform line2">
<div id="information">
<span class="bg"></span>
</div>
<div class="grid_6 prefix_1 omega">
<h2>Shipping & Billing</h2>
<form action="billing.php#!/Billing" method="post" id="GenericForm">
<fieldset>
<h3>Shipping Information</h3>
<div class="wrapper">
<div class="floatleft">
<label id="lblfname">
<span class="bg"><input id="fname" name="fname" type="text" value="" placeholder="First Name:" class="input"></span></label></div>
<div class="floatleft">
<label id="lbllname">
<span class="bg"><input id="lname" name="lname" type="text" value="" placeholder="Last Name:" class="input"></span></label></div>
<div class="floatleft">
<label><span></span></label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblEmail">
<span class="bg"><input id="Email" name="Email" type="text" value="" placeholder="Email:" class="input"></span>
<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="floatleft">
<label id="lblMobilePhone">
<span class="bg"><input id="MobilePhone" name="MobilePhone" type="text" value="" placeholder="Mobile Phone:" class="input"></span>
<span class="error">*This is not a valid phone number.</span></label></div>
<div class="floatleft">
<label id="lblOtherPhone">
<span class="bg"><input id="OtherPhone" name="OtherPhone" type="text" value="" placeholder="Other Phone:" class="input"></span>
<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblAddress1">
<span class="bg"><input id="Address1" name="Address1" type="text" value="" placeholder="Address Line1:" class="input"></span>
<span class="error">*This is not a valid URL.</span> <span class="empty">*This field is required.</span> </label></div>
<div class="floatleft">
<label id="lblAddress2">
<span class="bg"><input id="Address2" name="Address2" type="text" value="" placeholder="Address Line2:" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCity">
<span class="bg"><input id="City" name="City" type="text" value="" placeholder="City:" class="input"></span></label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblState">
<span class="bg"><input id="State" name="State" type="text" value="" placeholder="State:" class="input"></span>
<span class="error">*This is not a valid URL.</span> <span class="empty">*This field is required.</span> </label></div>
<div class="floatleft">
<label id="lblPostalCode">
<span class="bg"><input id="PostalCode" name="PostalCode" type="text" value="" placeholder="PostalCode:" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCountry">
<span class="bg"><input id="Country" name="Country" type="text" value="" placeholder="Country:" class="input"></span></label></div>
</div>
</div>
</div>
<div id="showright">
<div id="messages">
<h3>Billing Options</h3>
<div class="wrapper">
<input type="radio" name="radio" id="PayWPayPal" value="PayWPayPal"><label for="PayWPayPal">Pay using PayPal Balance</label>
<br />
<input type="radio" name="radio" id="PayWCC" value="PayWPayPal"><label for="PayWCC">Pay using Credit Card</label>
</div>
<div id="CCFields">
<div class="wrapper">
<div class="floatleft">
<label id="lblCCType">
<span class="bg"><select>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="Amex">Amex</option>
<option value="Discover">Discover</option>
</select></span> </label></div>
<div class="floatleft">
<label id="lblCCNum">
<span class="bg"><input id="CCNum" name="CCNum" type="text" value="" placeholder="xxxx xxxx xxxx xxxx" class="input"></span> </label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblCCExpiration">
<span class="bg"><input id="CCExpiration" name="CCExpiration" type="text" value="" placeholder="MM/YY" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCVV">
<span class="bg"><input id="CVV" name="CVV" type="text" value="" placeholder="CVV" class="input"></span></label></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="btns"><strong><input name="Pay" type="submit" class="button1" value="Confirm Quantities and Pay"></strong></div>
</div>
</fieldset>
</form>
</div>
</li>
</ul>
</article>
</div>
</body>
</html>
还有 CSS:
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, keygen,label, legend, li, meter, nav,
object, ol, output, p, pre, progress,
q, s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style: none;
}
* { border:none}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}
.relative{ position:relative;}
body{ background: url(../images/bg.gif) center top repeat #100f10; border:0; font:13px Arial, Helvetica, sans-serif; color:#717171; line-height:22px; min-width:960px; overflow:hidden}
.container_24 {
margin-left: auto;
margin-right: auto;
width: 1260px;
height:50px;
}
h2{ font-size:25px; color:#26251e; line-height:1.2em; padding: 0 0 27px 0; letter-spacing:-1px;}
.grid_6,
.grid_24 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.container_24 .prefix_1 {
padding-left:40px;
}
.floatleft {
width: 260px;
float: left;
margin: 5px;
}
.floatright {
float: right;
margin: 5px;
}
#showright {
float:right;
width:390px;
margin:2px;
position:relative;
}
.baseform {
width:850px;
float:left;
}
#messages {
height:200px;
margin:100px 30px;
}
#information {
z-index:9;
background-color:#FFFF99;
height:200px;
width:200px;
position:absolute;
display:none;
}
#content > ul{ margin:0 7px 0 5px; position:relative; margin-top:0px; z-index:1;}
#content > ul > li{ background:#fafafa; height:556px; width:100%; padding-top:60px; position:relative;}
.label { margin:0; width:320px; height:17px; background:#CCC; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
.line2{ background:url(../images/line_vert1.gif) 845px 0 repeat-y;}
#GenericForm{ padding-top:7px; position:relative;}
#GenericForm .wrapper{ overflow:inherit; min-height:37px; width:900px;}
#GenericForm .success{ padding:15px 30px; display:none; background:#26251e; color:#fff; top:150px; left:0; right:0; position: absolute; z-index:2}
#GenericForm label{ position:relative;min-height:31px; display: inline-block; z-index:1;}
#GenericForm .message{ height:250px;}
#GenericForm span{ display:block}
#GenericForm .error, #GenericForm .empty{ font-size:10px; color:#26251e; line-height:14px; display:none; width:100%}
#GenericForm a{ margin-right:15px; float: left; width:63px; text-align:center}
#GenericForm .input { margin:0;width:204px; height:17px; background: none; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm .inputoptional { margin:0;width:204px; height:17px; background: #FFC; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm textarea { overflow: auto; margin:0;width:204px; height:258px; background: none; padding:7px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm .bg{ background:#f2f2f2; border:1px solid #fff; border-top:1px solid #c4c4c4; border-left:1px solid #c4c4c4; float:left;}
.button1{ display:inline-block; font-size:12px; color:#fff; text-transform:uppercase; line-height:33px; position:relative; background:#393436;}
.button1:hover{ color:#FF9}
.button1 span{ position: absolute; top:0; left:0; width:100%; height:100%; background:#e54d26}
.button1 strong{ position:relative; padding:0 11px;}
那么我该如何解决这个问题呢？我使用的布局有问题吗？ 请注意，实际页面更复杂(并且是用 PHP 编写的)，我提取了其中的一些内容来演示问题。
最佳答案
问题:
在子元素关闭之前关闭父元素是非法语法。使用 HTML 时，务必始终遵循 LOFC(最后打开先关闭)方法。
解决方案:
制作<form>元素父元素而不是 div。将几乎所有元素都放在表单元素中是完全没问题的。
关于html - 跨 DIV 拆分的表单 - CSS 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35714568/