html - 当切换器本身使用标签进行样式设置时，如何使标签的文本显示在切换器旁边

Question

我编写了一个小的切换组件，可以用来代替复选框。

它的工作方式是标签元素本身就是切换，这意味着如果单击切换或标签，它应该可以访问并工作。

我遇到的问题是我无法让文本出现在滑块旁边，因为添加填充或任何类型的边距会扭曲滑块皮肤。

现场演示在这里：https ://svelte.dev/repl/84cfc5281b5d4289b99b222b338f48ae?version=3.20.1

代码由以下 CSS 组成：

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 34px;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #2196f3;
  }

  input:checked + .slider {
    box-shadow: 0 0 1px #2196f3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

和以下html：

<label class="switch">
  <input type="checkbox" bind:checked />
  <span class="slider" />
  <span>Accept Terms</span>
</label>

显然，简单的解决方法是将文本移出标签，但随后我失去了可访问性，这并不理想。

标签： htmlcss

Answer 1

由于 switch 元素有position: relative并且 theslider有一个固定的宽度，你可以添加position: absolute到<span>with 文本。

.slider + span {
  position: absolute;
  left: 70px;
}

然后你可以随意定位它。
您也可以使用white-space: nowrap将文本放在一行上。