css - 如何使用 wrap 水平显示 reactjs 地图循环中的项目列表？

Question

我有一个来自 reactjs 映射函数的项目列表（动态创建的按钮）。我希望它们水平列出，并且如果需要还允许将剩余的项目包装到下一行。有人可以帮忙吗？下面给出的是我的代码片段。

return( <div>
            { relevantMessages.map(function(thisQuestion){
                return 
                       <p key={thisQuestion.id}>
                           <button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
                                {thisQuestion.title}
                           </button>
                       </p>
                 }, this)
             }
        </div>)

标签： cssreactjs

Answer 1

您可以使用 css 水平对齐。

例如：

return( <div>
            { relevantMessages.map(function(thisQuestion){
                return 
                       <p key={thisQuestion.id} style="display:inline-block;">
                           <button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
                                {thisQuestion.title}
                           </button>
                       </p>
                 }, this)
             }
        </div>)