时间戳

首页 > 解决方案 > 带标签的单选按钮垂直对齐

reactjs - 带标签的单选按钮垂直对齐

问题描述

我正在尝试构建一个单选按钮，在这段代码中，我无法正确地使标签垂直对齐，我认为这是因为我在绝对和相对部分缺少一些东西，也尝试了垂直对齐但没有工作。

有没有更好的方法来使用 flex 呢？

如果我使用 flex 我无法正确分配输入内的小圆。

标签： reactjsstyled-components

解决方案

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

看起来您正在尝试使用 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;
  }

推荐阅读