Javascript 我的无序列表是从json文件呈现的，但我希望每个列表元素周围都有一个边框

我的列表元素没有格式化。我希望每个元素周围都有一个边框

我试过这个：

.list{
    border: 1px solid black;
}

为此

 return (
        <ul className="col-md-6 list-group">
        <li class="ywList">
        { Items}
        </li>
        </ul>

返回(


{Items}

---

呈现的列表应在每个元素周围显示一个边框，以便每个列表元素以相同的大小排列在一个框中。

如注释中所述，您应将“className”替换为“class”，并通过循环项目将其呈现为列表元素

return (
  <ul className="col-md-6 list-group">
      {
         Items.map(item => (
              // Here
              <li className="orderedList">
                  {item}
              </li>
         ))
      }
  </ul>
);

返回(

{
Items.map（item=>(
//这里

{item}

))
}

);

这仅在Items变量为数组时有效

编辑：我查看了你的沙箱，注意到两件事：

你的css没有加载

您的项目已经是列表项目标签

为了获得想要的效果，我只需在PostItem组件中添加一个className道具，如下所示：

positem.js

// Here we check the className prop
<li className={`list-group-item ${props.className || ''}`}>
 ...
</li>

//这里我们检查类名属性

...

新组件现在将有一个类名prop

NewList.js

const NewList = props => {
  const NewListItems = props.ambers.map(amber => {
    return (
      <PostItem
        // Here we add a className
        className="orderedList"
        key={amber.data.created}
        post={amber.data}
      />
    );
  });

  return <ul className="col-md-6 list-group">{NewListItems}</ul>;
};

const NewList=props=>{
const NewListItems=props.ambers.map（琥珀色=>{
返回(
);
});
返回
{NewListItems}
；
};

className不是列表项元素上的class。“我希望每个元素周围都有一个边框。”-现在你对所有的

项目都有

这些建议都不起作用。我将编辑我的答案来解释你需要什么。链接标题是否可以放在缩略图的侧面？我更新了沙盒，你只需要创建一些css:.post-list-media{display:flex；}.post-list-media>div{flex:1；}算出了！：）太好了！我当时不在电脑旁，无法编辑文件！