react styled-component overlap question

During the quiz project, when you click on a choice, the check icon overlaps the number to distinguish whether it is checked or not. By the way, as the length of the problem gets longer, the check mark moves when the problem becomes 2 lines, so can you tell me how to solve this?

JSX

<li className="option">
            <Icon checked={checkList[index][4]} onClick={() => handleChange(4)}>
              <FiCheck className="check" />
            </Icon>
            <div className="number" checked={checkList[index][4]} onClick={() => handleChange(4)}>
              ⑤
            </div>
            <span className="contents">
              {data[index].answerOptions[4]}
            </span>
          </li>

Styled-component

.option {
      display: flex;
      align-items: center;
      position: relative;
      .check {
        font-size:30px;
        position: absolute;
        cursor: pointer;
        top: -40%;
        left: -0.5%;
      }
      .number {
        margin-right: 5px;
        font-size: 20px;
        width: 20px;
        cursor: pointer;
      }

css javascript react

2022-09-20 15:48

1 Answers

Can you fix the width of the contents?

2022-09-20 15:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656