让明星排队CSS [英] Getting the stars to line up CSS

问题描述

我有一个用于星级评定的组件，所以我决定使用FA图标通过使用半颗星来完成这项工作.除了CSS之外，其他所有方法都很棒.我已经成功翻转了一些星星(FA图标仅移到一侧)，因此星星正确对齐，它们只是不碰.我只需要一些有关最简单的处理方法的建议.

I have a component that I use for a star rating, I decided to use FA icons to do the job by using half stars. Every works great, besides the CSS. I've successfully flipped some of the stars (FA icons only go to one side) so the stars align correctly, they just don't touch. I just need some advice on the easiest way to handle it.

Rater.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

Rater.css

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);
}

推荐答案

最简单的对齐方式是使用flexbox.

The easiest way to align stuff, is to use flexbox.

您只需将星星包装在容器中即可

You can simply wrap your stars in a container:

<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魔术:

And then add a bit flexbox magic:

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

您可以轻松调整星星的边距或填充.此外，您还可以玩justify-content.

You can easily adjust the margin or padding of the stars. Furthermore you can play with the justify-content.

这篇关于让明星排队CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！