如何使用CSS和HTML水平显示项目

Question

我有5条正在显示的信息。该信息由用户输入填充（从CSV中获取列信息）。

因此，如果有一列，它将显示该列的信息。如果有3列，则会显示这3列的信息，等等...

现在这些列垂直显示，但是我希望它们水平显示，以便我可以在底部添加一个滚动条，该滚动条向左/向右显示以显示更多内容。

说明：我希望每列的5行信息垂直显示。我希望第1列和第2列的信息彼此相邻（水平）显示。

<div style={{"display":"flex", "overflow": "auto", "width": "100%", "height": "100%" }}>
   <div style={{ "listStyle": "none", "display": "grid", "gridTemplateColumns": "1fr"}}>
      <ul style={{ "listStyle": "none", "display": "inline" }}>
         <li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info1 </label> </li><li><input readOnly type="text" id={column.info1} value={column.info1} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>
         <li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info2 </label> </li><li><input readOnly type="text" id={column.info2} value={column.info2} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>
         <li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info3 </label> </li><li><input readOnly type="text" id={column.info3} value={column.info3} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>
         <li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info4 </label> </li><li><input readOnly type="text" id={column.info4} value={column.info4} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>
         <li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info5 </label> </li><li><input readOnly type="text" id={column.info5} value={column.info5} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>
      </ul>
   </div>
</div>

Answer 1

添加显示：可弯曲到列表（ul）元素：

<ul style=style={{display: "flex", overflow: "auto"}}>
 ....
</ul>

然后将标签和输入字段放在一个列表项（li）中：

<li> <label style={{ "fontSize": "12px", "fontWeight": "bold" }}> Column info1 </label><input readOnly type="text" id={column.info1} value={column.info1} style={{ "width": "15vw", "border": "1px solid " + colors["disabled-border"] }} /> </li>

演示：https://codesandbox.io/s/infallible-almeida-mnk7r