如何均匀 Space 复选框,即使在调整页面大小时也是如此
How to Evenly Space Checkboxes, Even When Page is Resized
在此先感谢您的帮助。
我需要确保包含复选框和表单内标签的 DIVS 之间的垂直间距均匀——即使调整页面大小时也是如此。我遇到的问题是标签的长度不同,因此当调整页面大小时,DIVS 之间的间距是一致的,但我希望一个标签的末尾之间的间距均匀(最多可达 3行长)和下一个的开始。
我正在阅读有关 flexbox 的内容,并希望这是一种合适的处理方法。但它并没有像我预期的那样工作,也许是因为我做错了。或者可能是因为我正在使用自定义复选框的复选框 hack,这是干扰?
这是我的代码:
CSS:
/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;
height:14px;
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* FLEXBOX CONTROLS */
.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline;
}
.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}
HTML:
<div class="flex-container">
<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>
<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>
</div>
抱歉,如果回答晚了,但也许这仍然可以帮助您。查看您在此处提供的 JFiddle link:Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle 以及我为使其正常工作而实施的代码。
主要的 HTML 变化是:
<label for="checkboxG4" class="radGroup1">
<div class="css-label"></div>
<span>News, Commentary, Research & Special Reports</span>
</label>
而不是:
<label for="checkboxG4" class="css-label radGroup1">
<p>News, Commentary, Research & Special Reports</p>
</label>
和CSS改为:
input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}
而不是:
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}
在此先感谢您的帮助。
我需要确保包含复选框和表单内标签的 DIVS 之间的垂直间距均匀——即使调整页面大小时也是如此。我遇到的问题是标签的长度不同,因此当调整页面大小时,DIVS 之间的间距是一致的,但我希望一个标签的末尾之间的间距均匀(最多可达 3行长)和下一个的开始。
我正在阅读有关 flexbox 的内容,并希望这是一种合适的处理方法。但它并没有像我预期的那样工作,也许是因为我做错了。或者可能是因为我正在使用自定义复选框的复选框 hack,这是干扰?
这是我的代码:
CSS:
/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;
height:14px;
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* FLEXBOX CONTROLS */
.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline;
}
.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}
HTML:
<div class="flex-container">
<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>
<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>
</div>
抱歉,如果回答晚了,但也许这仍然可以帮助您。查看您在此处提供的 JFiddle link:Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle 以及我为使其正常工作而实施的代码。
主要的 HTML 变化是:
<label for="checkboxG4" class="radGroup1">
<div class="css-label"></div>
<span>News, Commentary, Research & Special Reports</span>
</label>
而不是:
<label for="checkboxG4" class="css-label radGroup1">
<p>News, Commentary, Research & Special Reports</p>
</label>
和CSS改为:
input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}
而不是:
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}