react styled-component overlap question

Asked 2 weeks ago, Updated 2 weeks ago, 1 views

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


© 2022 pinfo. All rights reserved.