让星星排列 CSS答案

【问题标题】：Getting the stars to line up CSS让星星排列 CSS
【发布时间】：2020-09-23 18:28:39
【问题描述】：

我有一个用于星级评定的组件，我决定使用 FA 图标通过使用半星来完成这项工作。除了 CSS 之外，每一个都很好。我已经成功翻转了一些星星（FA 图标只在一侧），所以星星正确对齐，它们只是不接触。我只需要一些关于处理它的最简单方法的建议。

评分者.js

import React, { useState } from 'react'
import {FaStarHalf} from "react-icons/all";
import './Rater.css'


const Rater = () => {
    const [rating, setRating] = useState(null);
    const [hover, setHover] = useState(null);
    const [value] = useState(100);
    const [iconValue, setIconValue] = useState(5);

    return (
        <div>
            <select
                onChange={e => {
                    setIconValue(Number(e.target.value));
                }}
            >
                {Array.from(new Array(value), (value, index) => index + 1).map(
                    value => (
                        <option key={value} value={value}>
                            {value}
                        </option>
                    )
                )}
            </select>
            <h1> Select Amount of Icons </h1>

            {[...Array(iconValue), ...Array(iconValue)].map((icon, i) => {
                const value = i + 1;

                return (
                    <label>
                        <input
                            type="radio"
                            name="rating"
                            value={value}
                            onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className={i % 2 ? "star-left" : "star"}
                            color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>

                );
            })}
        </div>
    );
};

export default Rater

评分者.css

input[type='radio'] {
    display: none;
}

.star {
    cursor: pointer;
    transition: color 200ms;
    /*transform: rotate(180deg);*/
}
.star-left {
    cursor: pointer;
    transition: color 200ms;
    transform: scaleX(-1);
}

【问题讨论】：

标签： javascript css reactjs react-functional-component

【解决方案1】：

对齐内容最简单的方法是使用 flexbox。

您可以简单地将星星包装在容器中：

<div class="container">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

然后添加一点 flexbox 魔法：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;

您可以轻松调整星星的边距或内边距。此外，您还可以使用justify-content。

【讨论】：

我添加了一些代码，并没有真正改变。它是上下而不是左右，所以我不得不添加 inline-flex，但星星之间的距离仍然很远

【解决方案2】：

创建一个为星形图标一半宽度的容器并隐藏溢出。然后将左（实际上是右半边）星的宽度（x 轴）平移一半。

CSS

input[type='radio'] {
  display: none;
}

.star-container {
  cursor: pointer;
  display: inline-block;
  height: 2rem;
  width: 1rem;
  overflow: hidden;
}

.star {
  transition: color 200ms;
  height: 2rem;
  width: 2rem;
}

.star-left {
  transform: scaleX(-1) translateX(50%);
}

星形容器

<div className="star-container">
  <FaStarHalf
    className={i % 2 ? "star star-left" : "star"}
    color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
    onMouseEnter={() => setHover(value)}
    onMouseLeave={() => setHover(null)}
  />
</div>

【讨论】：