1. 总结问题

这个问题的目的是找到并排显示html的两个部分的最佳方法。理想情况下，我希望能够像这样分解UI

而不是当前设置

1. 描述您所做的尝试

我尝试过自己修改html，但我想从更有经验的开发人员那里得到如何修改的建议。

1. 显示一些代码

<center>
        <div id="boxstyle">
          <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>

          <center>
            <div class="inputBoxes">
              User Input:
              <table id="tablestyle">
                <td>
                  <input id="el1" type="text" value="">
                </td>
                <td>
                  <input id="el2" type="text" value="">
                </td>
                <td>
                  <input id="el3" type="text" value="">
                </td>
                <td>
                  <input id="el4" type="text" value="">
                </td>
                <td>
                  <input id="el5" type="text" value="">
                </td>
              </table>
            </div>
          </center>
          <center>
            <div class="inputBoxes">
              Result in HTML:
              <table id="tablestyle">
                <td>
                  <input id="dl1" type="text" value="">
                </td>
                <td>
                  <input id="dl2" type="text" value="">
                </td>
                <td>
                  <input id="dl3" type="text" value="">
                </td>
                <td>
                  <input id="dl4" type="text" value="">
                </td>
                <td>
                  <input id="dl5" type="text" value="">
                </td>
              </table>
              <span style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
              </span>
            </div>
          </center>
          <center>

---

顺晟科技：

可用于此。 所有的输入都包含在where中。标签不再使用了，所以被用来对齐flex框。类似地，所有文本都使用

对齐到中心

你可以尝试学习。例如:

这是CSS FlexBox的完美使用

以下是如何使用它的完整指南，这样您就不会被锁定在一个实现中:

CSS技巧

您可以搜索像Bootstrap这样的框架，它们内置类来为您的HTML创建行、列和自定义布局