[英]Three items in list to render side by side
I'm trying to get a list item with three data pieces appended side by side of each other.我正在尝试获取一个列表项,其中三个数据并排附加。 This is what I'm trying to accomplish:这就是我想要完成的事情:
Currently my list looks like the below with the circle squashed.目前,我的列表如下所示,圆圈被压扁。
//Rendering to DOM
<div className="Legend-Component col-3" align="center">
{legendData.map((item, index) => (
<ul key={index}>
<li>
<span>{item.name}</span>
<span className={`${item.className[index]}`}></span>
<span>{item.total}</span>
</li>
</ul>
))}
</div>
//CSS Style Sample
.Legend-Component ul {
list-style-type: none;
margin: 1%;
font-size: 12px;
}
.darkDot {
height: 13px;
width: 13px;
background-color: #79242F;
border-radius: 50%;
border: 1px solid grey;
margin: 0px 2px 0px 2px;
}
As you have specified the width and height tell it how to span by adding the display element to it.正如您指定的宽度和高度,通过向其添加显示元素来告诉它如何跨越。
The below code shows one of the possibilities下面的代码显示了一种可能性
.darkDot {
display: inline-block;
width: 13px;
height: 13px;
background-color: #79242F;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.