Css 如何在不影响复选框的情况下更改复选框标签的宽度？

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

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

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

HTML: 订阅此网站

CSS:

---

提前感谢。

在

.wpcf7列表项>标签>输入[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;
}

全小提琴（吉吉迪）在这里

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