0

Внутри контейнера у меня чекбокс, значения бокс - нейм которого выводятся в цикле и 2 контейнера должны рядом выводить списки, но не получается разместить их рядом. Имею:

.outerCheckbox {
  background: cadetblue;
  text-align: center;
}

.innerBox {
  width: 49%;
  background: coral;
}

.innerNamebox {
  float: left;
  width: 49%;
  background: darkgreen;
}

введите сюда описание изображения

<div className="outerCheckbox">
                <form>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                    <br />
                </form>
            </div>

Второй вариант вывода цикла:

Второй вариант вывода цикла

Получил в ответе:

введите сюда описание изображения

Дерево после ответа:

<div className="outerCheckbox">
                <form className="a">
                <div className='v'>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                            <div className='asdass'>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                        </div>
                    <br />
                    </div>
                </form>

            </div>

9
  • а можно поточнее, что именно у вас и что хотелось бы видеть - вам хочется, чтобы рядом с checkbox стояли надписи мегафон и т.д.?
    – Zhihar
    21 окт 2020 в 10:42
  • @Zhihar да, чтобы коробка была слева, а имя справа.
    – MrYogurt
    21 окт 2020 в 10:44
  • а обернуть в единый div вас почему не устраивает?
    – Zhihar
    21 окт 2020 в 10:45
  • @Zhihar Оно уже в едином диве outerCheckbox, но как я и написал, вывод происходит в цикле и мне нужны четко фиксированные контейнеры слева и справа.
    – MrYogurt
    21 окт 2020 в 10:47
  • Додайте html розметку 21 окт 2020 в 10:47

1 ответ 1

1

  <div className="outerCheckbox">
                <form className="a">
                <div className='v'>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                            </div>
                            <div className='asdass'>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                        </div>
                    <br />
                </form>

            </div>

Не знаю правильно ли я понял, да и реакт код тут.

.outerCheckbox {
  background: cadetblue;
  text-align: center;
}

.a{
  display: flex;
  justify-content: space-around;
}

.innerBox {
  background: coral;
}

.innerNamebox {
  line-height: 21px;
  background: darkgreen;
}
 <div class="outerCheckbox">
                <form class='a'>
                  <div class='v'>
                        <div class="innerBox"><input /></div>
                        <div class="innerBox"><input /></div>
                        <div class="innerBox"><input /></div>
                      </div>
                      <div class='asdass'>
                        <div class="innerNamebox"><label>МТС</label></div>
                        <div class="innerNamebox"><label>МТС2</label></div>
                        <div class="innerNamebox"><label>МТС3</label></div>
                      </div>
                </form>
            </div>

5
  • Снова не помогло, добавил результат.
    – MrYogurt
    21 окт 2020 в 11:28
  • @MrYogurt надо обернуть innerBox и innerNamebox в div что бы сроботал flex. Нужна структура <from> в ней 2 блока div, а в них все что угодно уже. Должно роботать так как на примере 21 окт 2020 в 11:34
  • Прикрепил и дерево, все сделал как в ответе написано.
    – MrYogurt
    21 окт 2020 в 11:40
  • @MrYogurt div не там закрит, добавил код 21 окт 2020 в 11:49
  • Благодарю, все работает.
    – MrYogurt
    21 окт 2020 в 11:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.