代码之家 › 专栏 › 技术社区 › volna

使父宽度等于子宽度的最大值(响应开关切换)

css

volna · 技术社区 · 4 年前

.cookiemanagement__switchWrapper {
  display: flex;
  align-items: center;
}
.cookiemanagement__switchWrapper:last-of-type {
  margin-top: 15px;
}
.cookiemanagement__switch {
  display: inline-block;
  position: relative;
}
.cookiemanagement__switchInput {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.cookiemanagement__switchToggle {
  align-items: center;
  background-color: #9a3d37;
  border-radius: 50px;
  display: flex;
  height: 24px;
  justify-content: space-between;
  position: relative;
  transition: background-color ease-out 0.3s;
  z-index: 0;
}
.cookiemanagement__switchToggle:before {
  background: #fff;
  box-shadow: 1px 0 2px #646464;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.2s ease-out;
  width: 24px;
  z-index: 2;
}
.cookiemanagement__switchToggleValue {
  text-transform: uppercase;
  line-height: normal;
  transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
  margin: 0 4px 0 8px;
  opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
  margin: 0 8px 0 4px;
  opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle {
  background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle:before {
  left: calc(100% - 24px);
  box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
  opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
  opacity: 0;
}
.cookiemanagement__switchLabel {
  margin-left: 15px;
}

<div class="cookiemanagement__switch">
    <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
    <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
    </div>
</div>



<div class="cookiemanagement__switch">
    <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
    <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
    </div>
</div>

但是,我在支持价值观国际化方面有一些问题。因为现在整个元素的宽度是由两个子元素的宽度生成的,这两个子元素的宽度是“是”而不是“否”文本。

因此,我正在研究使整个组件宽度相等的方法:
width of the biggest children (text length) + 8px + 26px

8px
26px -圆的宽度/高度(橙色矩形部分)

下面是打算描述的内容的说明,其中DIAKH文本代表最大的孩子。

0 回复 | 直到 4 年前

Kosh 4 年前

可能的解决方案之一是使用否定的 margin-top 把 yes no width 致家长:

p * {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

label {
  position: relative;
  display: inline-block;
  margin: 0 0 0 .5em;
  color: #fff;
}

input {
  display: none
}

.key {
  position: absolute;
  z-index: 1;
  top: -.2em;
  left: -.05em;
  width: 2em;
  height: 2em;
  border: solid 1px rgba(0, 0, 0, .3);
  border-radius: 55%;
  box-shadow: .1em .1em .1em -.05em rgba(0, 0, 0, .5);
  background: ivory;
  transition: .3s;
}

.yes,
.no {
  display: block;
  margin: 0;
  border-radius: .8em;
  line-height: 1.6;
  box-shadow: inset .1em .1em .1em -.05em rgba(0, 0, 0, .3);
  transition: opacity .3s;
}

.yes {
  padding: 0 2.5em 0 .5em;
  background: forestgreen;
  opacity: 0;
}

.no {
  margin-top: -1.6em;
  padding: 0 .5em 0 2.5em;
  text-align: right;
  background: firebrick;
  opacity: 1;
}

:checked~.key {
  left: calc(100% - 2em);
}

:checked~.yes {
  opacity: 1
}

:checked~.no {
  opacity: 0
}

<p>English:
  <label>
    <input type="checkbox" checked>
    <span class="key"></span>
    <span class="yes">YES</span>
    <span class="no">NO</span>
  </label>
</p>

<p>Georgian:
  <label>
    <input type="checkbox">
    <span class="key"></span>
    <span class="yes">DIAKH</span>
    <span class="no">ARA</span>
  </label>
</p>

<p>Scots Gaelic:
  <label>
    <input type="checkbox" checked>
    <span class="key"></span>
    <span class="yes">THA</span>
    <span class="no">CHAN EIL</span>
  </label>
</p>

johannchopin 4 年前

你可以通过使用 flexbox width: fit-content

ul {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.cookiemanagement__switchWrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.cookiemanagement__switchWrapper:last-of-type {
  margin-top: 15px;
}

.cookiemanagement__switch {
  display: inline-block;
  position: relative;
  width: 100%;

}

.cookiemanagement__switchInput {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.cookiemanagement__switchToggle {
  align-items: center;
  background-color: #9a3d37;
  border-radius: 50px;
  display: flex;
  height: 24px;
  justify-content: space-between;
  position: relative;
  transition: background-color ease-out 0.3s;
  z-index: 0;
}

.cookiemanagement__switchToggle:before {
  background: #fff;
  box-shadow: 1px 0 2px #646464;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.2s ease-out;
  width: 24px;
  z-index: 2;
}

.cookiemanagement__switchToggleValue {
  text-transform: uppercase;
  line-height: normal;
  transition: opacity 0.2s ease-out 0.1s;
}

.cookiemanagement__switchToggleValue--on {
  margin: 0 4px 0 8px;
  opacity: 0;
}

.cookiemanagement__switchToggleValue--off {
  margin: 0 8px 0 4px;
  opacity: 1;
}

.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle {
  background-color: #6a7d39;
}

.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle:before {
  left: calc(100% - 24px);
  box-shadow: -1px 0 2px #646464;
}

.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
  opacity: 1;
}

.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
  opacity: 0;
}

.cookiemanagement__switchLabel {
  margin-left: 15px;
}

<ul>
  <li class="cookiemanagement__switchWrapper">
    <div class="cookiemanagement__switch">
      <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
      <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
      </div>
    </div>
  </li>

  <li class="cookiemanagement__switchWrapper">
    <div class="cookiemanagement__switch">
      <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
      <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
      </div>
    </div>
  </li>
</ul>

Temani Afif 4 年前

这里是CSS网格的一个想法,诀窍是将两个元素放在同一个区域内。您还可以保持相同的HTML结构。

相关代码:

.switchToggle {
  ...
  display: grid;
  align-items:center;
  ...
}
.switchToggle > * {
  grid-area:1/1;
}
.switchToggleValue--on {
  padding-right:32px;
}
.switchToggleValue--off {
  padding-left:32px;
  text-align:right;
}

完整代码:

.switch {
  display: inline-block;
  position: relative;
  margin:5px;
}
.switchInput {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.switchToggle {
  background-color: #9a3d37;
  border-radius: 50px;
  display: grid;
  align-items:center;
  height: 24px;
  position: relative;
  transition: background-color ease-out 0.3s;
  z-index: 0;
}
.switchToggle > * {
  grid-area:1/1;
}
.switchToggleValue--on {
  padding-right:32px;
}
.switchToggleValue--off {
  padding-left:32px;
  text-align:right;
}
.switchToggle:before {
  content: "";
  background: #fff;
  box-shadow: 1px 0 2px #646464;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.2s ease-out;
  width: 24px;
  z-index: 2;
}
.switchToggleValue {
  text-transform: uppercase;
  line-height: normal;
  transition: opacity 0.2s ease-out 0.1s;
}
.switchToggleValue--on {
  margin: 0 4px 0 8px;
  opacity: 0;
}
.switchToggleValue--off {
  margin: 0 8px 0 4px;
  opacity: 1;
}
.switchInput:checked ~ .switchToggle {
  background-color: #6a7d39;
}
.switchInput:checked ~ .switchToggle:before {
  left: calc(100% - 24px);
  box-shadow: -1px 0 2px #646464;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--on {
  opacity: 1;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--off {
  opacity: 0;
}
.switchLabel {
  margin-left: 15px;
}

<div class="switch">
    <input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
    <div class="switchToggle">
        <span class="switchToggleValue switchToggleValue--on">yes</span>
        <span class="switchToggleValue switchToggleValue--off">no</span>
    </div>
</div>
<br>
<div class="switch">
    <input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
    <div class="switchToggle">
        <span class="switchToggleValue switchToggleValue--on">no</span>
        <span class="switchToggleValue switchToggleValue--off">yes</span>
    </div>
</div>
<br>
<div class="switch">
    <input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
    <div class="switchToggle">
        <span class="switchToggleValue switchToggleValue--on">diakh</span>
        <span class="switchToggleValue switchToggleValue--off">ara</span>
    </div>
</div>
<br>
<div class="switch">
    <input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
    <div class="switchToggle">
        <span class="switchToggleValue switchToggleValue--on">ara</span>
        <span class="switchToggleValue switchToggleValue--off">diakh</span>
    </div>
</div>