Question

我有一个UI元素，显示什么时候不在标签标签内，当我把它放在标签内或在它不显示之前添加标签时，我做错了什么？

正如您在第一个div中看到的那样，只显示了文本，而第二个div只显示了图形，我想在右侧显示带有文本的toogle按钮。

#passwordToggleContainer {            
  width: 80%;
  margin: 0 auto 1em auto;            
}

.password-toggle {
  position: absolute;
  visibility: hidden; /* Hides the standard checkbox. */
}

.password-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  margin: 0 auto;
}

.password-toggle + label:before,
.password-toggle + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.password-toggle + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}

.password-toggle + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  -webkit-transition: margin 0.4s;
  transition: margin 0.4s;
}

.password-toggle:checked + label:before {
  background-color: #66B650;
}

.password-toggle:checked + label:after {
  margin-left: 40px;
}

<div id="passwordToggleContainer">

  <label>
    <input id="setPasswordToggle" class="password-toggle" type="checkbox">
    Set new password
  </label>
</div>

<div id="passwordToggleContainer">
  <input id="setPasswordToggle" class="password-toggle" type="checkbox">
  <label for="setPasswordToggle">Set new password</label>
</div>

Answer 1

＆＃13;

#passwordToggleContainer {            
  width: 80%;
  margin: 0 auto 1em auto;            
}

.password-toggle {
  /*position: absolute;
  visibility: hidden;*/ /* Hides the standard checkbox. */
}

.password-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  margin: 0 auto;
}

.password-toggle + label:before,
.password-toggle + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.password-toggle + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}

.password-toggle + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  -webkit-transition: margin 0.4s;
  transition: margin 0.4s;
}

.password-toggle:checked + label:before {
  background-color: #66B650;
}

.password-toggle:checked + label:after {
  margin-left: 40px;
}

＆＃13;

<div id="passwordToggleContainer">

  <label>
    <input id="setPasswordToggle" class="password-toggle" type="checkbox">
    Set new password
  </label>
</div>

<div id="passwordToggleContainer">
  <input id="setPasswordToggle" class="password-toggle" type="checkbox">
  <label for="setPasswordToggle">Set new password</label>
</div>

＆＃13;

第一期的原因：您已添加position:absolute。所以两者都从同一个地方开始。所以一个人隐藏了另一个。

＆＃13;

#passwordToggleContainer {            
  width: 80%;
  margin: 0 auto 1em auto;            
}

.password-toggle {
  /*position: absolute;
  visibility: hidden;*/ /* Hides the standard checkbox. */
}

.password-toggle + label {
  /*display: block;*/
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  margin: 0 auto;
}

.password-toggle + label:before,
.password-toggle + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.password-toggle + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}

.password-toggle + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  -webkit-transition: margin 0.4s;
  transition: margin 0.4s;
}

.password-toggle:checked + label:before {
  background-color: #66B650;
}

.password-toggle:checked + label:after {
  margin-left: 40px;
}

＆＃13;

<div id="passwordToggleContainer">

  <label>
    <input id="setPasswordToggle" class="password-toggle" type="checkbox">
    Set new password
  </label>
</div>

<div id="passwordToggleContainer">
  <input id="setPasswordToggle" class="password-toggle" type="checkbox">
  <label for="setPasswordToggle">Set new password</label>
</div>

＆＃13;

第二期的原因：

您将显示屏块设置为both label and input，将absolute position设置为两者。

Answer 2

你能做这样的事吗？

我放置了文字＆＃34;设置了一个新密码＆＃34;在自己的div中添加了margin-left和width，以使其显示在切换图片的右侧。

＆＃13;

#passwordToggleContainer {            
  width: 80%;
  margin: 0 auto 1em auto;            
}

.password-toggle {
  position: absolute;
  visibility: hidden; /* Hides the standard checkbox. */
}

.password-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  margin: 0 auto;
}

.password-toggle + label:before,
.password-toggle + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.password-toggle + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}

.password-toggle + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  -webkit-transition: margin 0.4s;
  transition: margin 0.4s;
}

.password-toggle:checked + label:before {
  background-color: #66B650;
}

.password-toggle:checked + label:after {
  margin-left: 40px;
}

.instructions {
    margin-left: 100px;
    width: 100px;  
}

＆＃13;

<div id="passwordToggleContainer">

  <label>
    <input id="setPasswordToggle" class="password-toggle" type="checkbox">
    Set new password
  </label>
</div>

<div id="passwordToggleContainer">
  <input id="setPasswordToggle" class="password-toggle" type="checkbox">
  <label for="setPasswordToggle">
    <div class="instructions">
      Set new password
    </div> 
  </label>
</div>

＆＃13;

Answer 3

您可以添加第二个标签，因为您正在为第一个标签设置样式。

＆＃13;

#passwordToggleContainer {
  width: 80%;
  margin: 0 auto 1em auto;
}

.password-toggle {
  position: absolute;
  visibility: hidden; /* Hides the standard checkbox. */
}

.password-toggle + label {
  display: inline-block;
  vertical-align:middle;
  position: relative;
  cursor: pointer;
  padding: 2px;
  width: 78px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  margin: 0 auto;
}

.password-toggle + label:before,
.password-toggle + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.password-toggle + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}

.password-toggle + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  -webkit-transition: margin 0.4s;
  transition: margin 0.4s;
}

.password-toggle:checked + label:before {
  background-color: #66B650;
}

.password-toggle:checked + label:after {
  margin-left: 40px;
}

＆＃13;

<div id="passwordToggleContainer">
  <input id="setPasswordToggle" class="password-toggle" type="checkbox">
  <label for="setPasswordToggle"></label>
  <label for="setPasswordToggle">Set new password</label>
</div>

＆＃13;

标签内的HTML标签未显示

3 个答案: