Question

我正在尝试构建一个单选按钮，在此code中，我无法正确地使标签垂直对齐，我认为这是因为我在绝对和相对部分上缺少某些内容，垂直对齐也没用。

是否有更好的方法来使用flex？

如果使用flex，我将无法在输入中正确分配小回合。

Answer 1

我假设您正在尝试将标签放置在单选按钮的右侧。

您似乎正在尝试使用flexbox，所以我会回答使用它。

首先，您应该在RadioButton中的单选按钮之后放置标签：

return (
  <Label htmlFor={id} disabled={disabled}>
    <Input
      id={id}
      type="radio"
      role="radio"
      name={name}
      value={value}
      disabled={disabled}
      onChange={onChange}
      checked={checked}
    />
    <Indicator />
    {label} // <----
  </Label>
);

然后，您可以将flexbox用于Label：

const Label = styled.label`
  display: flex;       // <----
  align-items: center; // <----
  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
  font-size: 24px;
`;

最后，您需要使Indicator的位置相对：

const Indicator = styled.div`
  border: 1px solid;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: relative; // <---

  ${Label}:hover & {
    background: #ccc;
  }

标签的单选按钮垂直对齐

1 个答案: