从上到下而不是水平列出元素

Question

在编码方面有点菜鸟，但我试图在我的页面上从上到下而不是从左到右列出选项。

 return (
         <div className="quizChallenge">
           <WebHeader/>
           <h2 id = "description"> {this.state.quizzes.description}</h2>
           <ol>
           <table id="t01">
             <tbody>
               <tr>
                 {this.state.options.map((option) => {
                   return (
                     <td key={option}>
                       <button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
                         {option}
                       </button></td>
                   );
                 })}
               </tr>
             </tbody>
           </table>
           </ol>
           {currentQuestion < 8 &&
                <button className="ui inverted button" disabled={this.state.disabled} onClick={this.nextQuestion}>Next</button>
           }
           {currentQuestion === 7 &&
                <button className="ui inverted button" disabled={this.state.disabled} onClick={this.lastQuestion}>Finish Quiz!</button>
           }
         </div>
       );

有人可以帮助我以最好的方式做到这一点吗？

options currently shown horizontally

Answer 1

改变这个：

<tr>
 {this.state.options.map((option) => {
   return (
     <td key={option}>
       <button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
         {option}
       </button></td>
   );
 })}
</tr>

到

{this.state.options.map((option) => {
   return (
    <tr>
     <td key={option}>
       <button disabled={!this.state.optionEnabled} onClick={() => this.checkAnswer(this.state.options.indexOf(option))}>
         {option}
       </button>
     </td>
    <tr>
   );
 })}

Woodrow Barlow 的解释：tr 代表“表格行”，td 代表“表格数据”。在一行中有多个数据单元格，它们水平显示。每行一个数据单元格，它们垂直显示。