Внутри контейнера у меня чекбокс, значения бокс - нейм которого выводятся в цикле и 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>
div
вас почему не устраивает?