修复了带有 CSS 的元素之间的 space

Question

我有一个 Label 元素，里面有一些文本和一个 Span。用户单击时标签的文本会发生变化（它变为 shorter/larger）。如果我在跨度中留出边距，那么当标签的文本得到 shorter/larger 时，跨度会随之移动。我希望跨度是静态的，无论坐在它旁边的元素是否得到 shorter/larger。出于某种原因，我不知道（我对 css 有点菜鸟）用 absolute 定位跨度是否有效（如果你能向我解释为什么这样做会很棒）。有没有更有效的方法呢？我是否仍应使用具有 Flexbox 和 CSS 网格的 absolute/relative 定位？不要注意 <Wrapper> 组件。这只是一个 returns 其 children 以避免将所有内容放入 <div>.

中的 HOC

import React, { useState } from 'react';
import styled from 'styled-components';
import Wrapper from '../HOCs/Wrapper';

const ToggleCheckbox = styled.input`
  display: none;
`;

const ToggleLabel = styled.label`
  cursor: pointer;
  padding: 2rem;
  display: inline-block;
  font-size: 1.6rem;
`;

const ToggleSpanBackground = styled.span`
  background-color: #e3dede;
  border-radius: 100px;
  display: inline-block;
  width: 40px;
  height: 10px;
  position: absolute;
  left: 14rem;
  top: 2.5rem;
  cursor: pointer;

  ${ToggleCheckbox}:checked + ${ToggleLabel} & {
    background-color: #2b90d9;
  }
`;

const ToggleSpanButton = styled.span`
  width: 2rem;
  height: 2rem;
  border-radius: 50px;
  display: inline-block;
  background-color: #e3dede;
  position: absolute;
  top: -0.5rem;
  left: 0.3rem;

  ${ToggleCheckbox}:checked + ${ToggleLabel} ${ToggleSpanBackground} &  {
    background-color: #2b90d9;
    left: 1.8rem;
  }
`;

export default function Toggle(props) {
  let [toggle, setToggle] = useState('off');

  return (
    <Wrapper>
      <ToggleCheckbox type='checkbox' id='toggle-checkbox'></ToggleCheckbox>
      <ToggleLabel
        htmlFor='toggle-checkbox'
        onClick={() =>
          setToggle((prevState) => {
            if (prevState === 'off') {
              return 'on';
            } else {
              return 'off';
            }
          })
        }
      >
        option: {toggle}
        <ToggleSpanBackground>
          <ToggleSpanButton></ToggleSpanButton>
        </ToggleSpanBackground>
      </ToggleLabel>
    </Wrapper>
  );
}

Answer 1

嗯，绝对位置有效地将元素从 DOM 流中移除。所以变大的东西不再碰它所以当它变大时它不会影响它的位置。

我会让 span 有一个固定的宽度，一个足够大的宽度来容纳长值或短值。

修复了带有 CSS 的元素之间的 space

Fixed space between elements with CSS

css

position

reactjs

styled-components