首页 > 解决方案 > HTML-表单- is breaking the alignment in the table layout</h1> <div id="body"><p>In HTML I am making a form where there are 2 tables side by side. In one table all the form <code><label>/Name/E Mail/Password</label&</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>html - HTML-表单-<textarea> is breaking the alignment in the table layout</h1> <div id="body"><p>In HTML I am making a form where there are 2 tables side by side. In one table all the form <code><label>/Name/E Mail/Password</label&</h1> </div> <div class="con"> <h3>问题描述</h3> <p class="author">标签： <span>html</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>表格内部不需要额外的表格，并且您将所有内容都包含在 1 行中，这就是为什么它的格式如此。</p> <p>你不应该为此使用表格，而不是当你有<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">CSS Flexbox</a>和<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">CSS Grid</a>之类的东西时。这是一个在表单中使用 flexbox的<a href="https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox--cms-26767" rel="nofollow noreferrer">基本示例。</a></p> <p>但是，如果您必须使用表格，请尝试使用这样的表格格式...</p> <pre><code><table> <tr> <td>label here</td> <td>form field here</td> </tr> <tr> <td>label here</td> <td>form field here</td> </tr> ... </table> </code></pre> <p>这是使用您的代码的示例。</p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <form class="" action="index.html" method="post"> <table> <tr> <td> <label>Name</label> </td> <td> <input type="text" name="" value=""> </td> </tr> <tr> <td> <label>Email</label> </td> <td> <input type="email" name="" value=""> </td> </tr> <tr> <td> <label>Password</label> </td> <td> <input type="password" name="" value=""> </td> </tr> <tr> <td> <label>Message</label> </td> <td> <textarea name="Message" rows="1" cols="30"></textarea> </td> </tr> </table> </form></code></pre> </div> </div> <p></p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/61978015.html">javascript - 如何在 HQ 音频旁边录制最低比特率的屏幕共享视频？</a></li><li><a href="/question/61978016.html">javascript - 音频 webaudio 类不接受带有“C:/”类型 url 的源</a></li><li><a href="/question/61978017.html">android - 如何将框架添加到 Android Studio 项目？</a></li><li><a href="/question/61978022.html">python - 我可以有一个无效范围的列表吗？欧拉项目#7</a></li><li><a href="/question/61978023.html">google-bigquery - 如何使用通配符表语法（如 _TABLE_SUFFIX）加入 INFORMATION_SCHEMA 元数据，以便在 Google Big Query 中通过 table_name 获取结果</a></li><li><a href="/question/61978030.html">kubernetes - 集群内无法访问 Kubernetes POD</a></li><li><a href="/question/61978032.html">c# - 如何在将照片添加到数据库之前显示照片的预览？</a></li><li><a href="/question/61978034.html">javascript - 如何在 JavaScript 中向 HH:MM:SS 添加分钟数？</a></li><li><a href="/question/61978035.html">javascript - 每次单击开关时都需要创建一个新对象，并在关闭时将其删除</a></li><li><a href="/question/61978036.html">python - Python NameError：未定义名称'N'</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>