我有一个表格，它分为两列，带有 float 。我想让他们“方格”。我如何使用第 nth-child 来实现这一目标？请参阅下面的屏幕截图以了解我的意思。这是我的 HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Grade Calculator
</title>
<style type="text/css">
.form-group {
padding: 15px;
width: 45%;
float: left;
}
.form-group:nth-child(3n+0){
background: #e4e4e4;
}
form {
margin: 25px auto;
border-width: 0px 1px;
border-style: solid;
border-color: #ccc;
width: 50%;
}
label {
width: 350px;
margin: 0;
padding: 0;
display: block;
}
input {
width: calc(100% - 20px);
margin: 15px 0px;
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Era4Q8Ttswx16Rg3XXwdNh7LuVHYalpdgKUCOJGwMcgBX7OP6eVRcScpUQ68BMteFlRltJ8L3vXUMx8wG+4DEf3Oi4RZcMfq/H6H7MbdpUbBLssudRCbS2QNV6vILQ9uBG64j4wb2CKGAAM2+aw+BYfCpxNSeloQ2BbcnUnOHjk=" />
</div>
<div>
<div class="form-group">
<span id="aOneActualLbl">Assignment 1</span>
<input name="aOneActualTxt" type="text" value="8" id="aOneActualTxt" />
<span id="aOnePossibleLbl">Possible</span>
<input name="aOnePossibleTxt" type="text" value="10" id="aOnePossibleTxt" />
</div>
<div class="form-group">
<span id="aTwoActualLbl">Assignment 2</span>
<input name="aTwoActualTxt" type="text" value="8" id="aTwoActualTxt" />
<span id="aTwoPossibleLbl">Possible</span>
<input name="aTwoPossibleTxt" type="text" value="10" id="aTwoPossibleTxt" />
</div>
<div class="form-group">
<span id="aThreeActualLbl">Assignment 3</span>
<input name="aThreeActualTxt" type="text" value="9" id="aThreeActualTxt" />
<span id="aThreePossibleLbl">Possible</span>
<input name="aThreePossibleTxt" type="text" value="10" id="aThreePossibleTxt" />
</div>
<div class="form-group">
<span id="aFourActualLbl">Assignment 4</span>
<input name="aFourActualTxt" type="text" value="9" id="aFourActualTxt" />
<span id="aFourPossibleLbl">Possible</span>
<input name="aFourPossibleTxt" type="text" value="10" id="aFourPossibleTxt" />
</div>
<div class="form-group">
<span id="aFiveActualLbl">Assignment 5</span>
<input name="aFiveActualTxt" type="text" value="8" id="aFiveActualTxt" />
<span id="aFivePossibleLbl">Possible</span>
<input name="aFivePossibleTxt" type="text" value="10" id="aFivePossibleTxt" />
</div>
<div class="form-group">
<span id="aSixActualLbl">Assignment 6</span>
<input name="aSixActualTxt" type="text" value="8" id="aSixActualTxt" />
<span id="aSixPossibleLbl">Possible</span>
<input name="aSixPossibleTxt" type="text" value="10" id="aSixPossibleTxt" />
</div>
<div class="form-group">
<span id="aSevenActualLbl">Assignment 7</span>
<input name="aSevenActualTxt" type="text" value="8" id="aSevenActualTxt" />
<span id="aSevenPossibleLbl">Possible</span>
<input name="aSevenPossibleTxt" type="text" value="10" id="aSevenPossibleTxt" />
</div>
<div class="form-group">
<span id="aEightActualLbl">Assignment 8</span>
<input name="aEightActualTxt" type="text" value="8" id="aEightActualTxt" />
<span id="aEightPossibleLbl">Possible</span>
<input name="aEightPossibleTxt" type="text" value="10" id="aEightPossibleTxt" />
</div>
<div class="form-group">
<span id="aNineActualLbl">Assignment 9</span>
<input name="aNineActualTxt" type="text" value="8" id="aNineActualTxt" />
<span id="aNinePossibleLbl">Possible</span>
<input name="aNinePossibleTxt" type="text" value="10" id="aNinePossibleTxt" />
</div>
<div class="form-group">
<span id="aTenActualLbl">Assignment 10</span>
<input name="aTenActualTxt" type="text" value="8" id="aTenActualTxt" />
<span id="aTenPossibleLbl">Possible</span>
<input name="aTenPossibleTxt" type="text" value="10" id="aTenPossibleTxt" />
</div>
<div class="form-group">
<input type="submit" name="runCalculation" value="Calculate Grade" id="runCalculation" />
<span id="currentGradeLbl">Your current grade is B</span>
</div>
</div>
在下面的屏幕截图中，我希望分配 2、3、6、7 和 10 为灰色以创建方格效果。这可能吗？
最佳答案
我试图用一个公式来解决这个问题，但有时如果你把它们分成多个系列就很容易了。
2, 6, 10, 14, ... => 4n-2
3, 7, 11, 15, ... => 4n-1
所以，
.form-group:nth-child(4n-2), .form-group:nth-child(4n-1){
background: #e4e4e4;
}
检查这个fiddle
关于css - 带有 CSS nth-child 的两个列检查器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35052504/