Css 为什么flex direction不能像我设置的那样工作？反应js

很简单。有一个标题、一个搜索栏和一些来自API的呈现内容。非常基本的东西。更基本的是，我调用API在搜索栏下方显示一组电影图像。更简单，对吗？search.map启动映射过程，下面我有一个ul，其中有一些li项将要显示。但它们只会倒下……让它们并排倒下感觉是不可能的。我试过在不同的div上放置显示flex和flex direction行，我试过放置！定义css元素后的重要信息。没有什么。有什么想法吗？ 这是密码

.formdiv{
边缘底部：1rem；
}
.集装箱{
对齐项目：居中；
}
.搜索栏{
宽度：760px；
字号:1rem ;；
字体大小：400；
线高：1.5；
大纲：无；
背景颜色：白杏仁；
颜色：灰色；
边框：1x实心蓝紫色；
边界半径：0.25雷姆；
填充：0.375雷姆0.75雷姆；
}
.searchBtn{
颜色：白色；
背景色：黑色；
字号：1rem；
大纲：无；
最小高度：36px；
字体大小：400px；
文本对齐：居中；
光标：指针；
填充：0.375雷姆0.75雷姆；
线高：1.5；
边界半径：0.25雷姆；
}
.img容器h1{
填充：10px；
}
.图像元素{
宽度：250px；
高度：320px；
左侧填充：5px；
右侧填充：5px；
}
.数据容器{
填充物：5px；
}
.弯曲{
显示器：flex；
弯曲方向：行；
列表样式：无；
}

导入“/SearchBar.css”； 从“React”导入React，{useState}； 常量搜索栏=（）=>{ const[search，setSearch]=useState（[]）； const[input，setInput]=useState（“”）； 常量onUserInput=（{target}）=>{ 设置输入（目标值）； }; const SearchApi=（事件）=>{ const aUrl=“”； const newUrl=aUrl+“&query=“+input； event.preventDefault（）； 获取（新URL） .then（（response）=>response.json（）） 。然后（（数据）=>{ setSearch（数据、结果）； }) .catch（（错误）=>{ console.log（“错误！！数据中断！：”，错误）； }); }; 返回( 电影搜索盛典！ 电影快车搜索 {search.map（（项目）=>(

))} ); };

---

父元素需要有

显示：flex

。flex元素在一行中显示其子元素

您需要做的是：

<ul className="flexed">
  {search.map((item) => (
    <li key={item.id}>
      <img className="image-element" alt="poster" src={item.src}></img>
    </li>
  ))}
</ul>

{search.map（（项目）=>(


))}

相反，您所做的是地图中也有

ul

，这导致div中有几个flex

ul

。默认情况下，div有

display:block

，因此项目显示在彼此下方。

---

通过将所有的

li

s包装在一个

ul

中，将获得所需的效果。

输入和Img标签不应具有结束标签。它们是HTML自动关闭标签。我非常感谢您的更正，但这并没有解决原来的问题。是的。维巴夫打败了我。

<ul className="flexed">
  {search.map((item) => (
    <li key={item.id}>
      <img className="image-element" alt="poster" src={item.src}></img>
    </li>
  ))}
</ul>