在容器内我有一个复选框,其中的box-name值循环显示,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>
不知道我理解的对不对,react代码就在这里。