Question

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

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

所以我无法让圆圈保持相同的大小，旁边有一行文字。当我将宽度设置为100％时，它显然会破坏圆圈。请参阅下面的JSFiddle。

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;
}

完全小提琴（gigiddy）https://jsfiddle.net/Lzbms2r8/2/

如何在不影响Checkbox的情况下更改Checkbox标签的宽度？

1 个答案: