css - 如何改变复选框标签的宽度而不影响复选框？

Question

我有一个自定义创建的复选框(不是标准浏览器复选框)。

我需要将标签文本放在一行上，但由于 CSS 中的宽度设置为 28px(因为这是圆形复选框的大小)，因此它会使文本超过一行。

因此，我无法使圆圈与旁边一行上的文本保持相同的大小。当我将宽度设置为 100% 时，它显然会破坏圆圈的形状。请参阅下面的 JSFiddle。

https://jsfiddle.net/Lzbms2r8/1/

HTML:

订阅本网站

CSS:

.wpcf7-list-item input[type=checkbox] {
visibility: hidden;
}
.wpcf7-list-item .wpcf7-list-item-label {
text-indent: 35px;
}
.wpcf7-list-item > label > input[type=checkbox] + span  {
width: 28px;
 height: 28px;
display: inline-block;
 position: relative;
  top: 0;
  left: 0;
border-radius: 50px;
border: 1px solid #000000;
vertical-align:middle;
cursor: pointer;
box-sizing: border-box;
margin-right:50px;

}
.wpcf7-list-item > label > input[type=checkbox] + span:after  {
content: '';
width: 16px;
height: 16px;
position: absolute;
background-color: #000000;
top: 2px;
left: 2px;
border-radius: 50px;
opacity: 0;
}
.wpcf7-list-item > label > input[type=checkbox]:checked + span:after {
opacity: 1;
}

提前致谢。

Answer 1

将 white-space: no-wrap 添加到 .wpcf7-list-item > label > input[type="checkbox"] + span 声明，更新为你在下面:

.wpcf7-list-item > label > input[type=checkbox] + span  {
   width: 28px;
   height: 28px;
   display: inline-block;
   position: relative;
   top: 0;
   left: 0;
   border-radius: 50px;
   border: 1px solid #000000;
   vertical-align:middle;
   cursor: pointer;
   box-sizing: border-box;
   margin-right:50px;
   white-space: nowrap;
}

这里完全 fiddle (头晕)https://jsfiddle.net/Lzbms2r8/2/