Question

我有以下html：

<div class="quickselect">
        <div class="middle">
            <label class="label_quickselect">
                <input class="input_quickselect" type="radio" name="qty" value="1" checked/>
                <div class="quantity box">
                    <span>1X</span>
                </div>
            </label>

            <label class="label_quickselect">
                <input class="input_quickselect" type="radio" name="qty" value="2"/>
                <div class="quantity box">
                    <span>2X</span>
                </div>
            </label>
            <label class="label_quickselect">
                <input class="input_quickselect" type="radio" name="qty" value="3"/>
                <div class="quantity box">
                    <span>3X</span>
                </div>
            </label>
        </div>
    </div>

和相应的CSS：

.middle {
    width: 100%;
    text-align: center;
    display: inline;
  }
  .middle .input_quickselect {
    display: none;
  }
  .middle .input_quickselect:checked + .box {
    background-color: white;
  }
  .middle .input_quickselect:checked + .box span {
    color: black;
    transform: translateY(70px);
  }
  .middle .input_quickselect:checked + .box span:before {
    transform: translateY(0px);
    opacity: 1;
  }
  .middle .box {
    width: 36px;
    height: 36px;
    background-color: white;
    color: black;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    border: 2px solid black;
    font-family: "sans-serif", sans-serif;
    font-weight: 900;
  }
  .middle .box:active {
    transform: translateY(10px);
  }
  .middle .box span {
    position: relative;
    transform: translate(0, 60px);
    left: 0;
    right: 0;
    top: 20%;
    transition: all 300ms ease;
    font-size: 1.0em;
    user-select: none;
    color: black;
  }
  .middle .box span:before {
    font-size: 1.2em;
    font-family: FontAwesome;
    display: block;
    transform: translateY(-80px);
    opacity: 0;
    transition: all 300ms ease-in-out;
    font-weight: normal;
    color: black;
  }

因此，单选按钮的样式设置为带有点击效果的框。
不幸的是，活动按钮的文本（跨度）并未显示在按钮中央，而是显示在按钮下方。
有人可以帮我吗？

Answer 1

所以问题确实是一个translate（）函数：

  .middle .input_quickselect:checked + .box span {
    color: black;
    transform: translateY(70px);
  }

导致跨度向下移动70像素。感谢Rachel Gallen。

范围内的文本未显示在应显示的位置

1 个答案: