站长

<blockquote>
<p>平时的表单需求都是从上到下，表单多了就出滚动条。最近有个产品给出一个表单多了就分两列的需求。</p>
</blockquote>
<h2 id="heading-0">需求描述</h2>
<p>现有的表单组件展示样式</p>
<p><img src="https://img.blogweb.cn/article/0947fc28209a4a9f9a20243516257912.webp" loading="lazy" alt="css的columns属性在实际开发过程中的应用"></p>
<p>预期的表单组件展示</p>
<p><img src="https://img.blogweb.cn/article/b328a76965f54c9ea906612e457f39c4.webp" loading="lazy" alt="css的columns属性在实际开发过程中的应用"></p>
<h2 id="heading-1">antd的表单实现</h2>
<p>直接在form上增加 <code>columns: 2</code></p>
<h2 id="heading-2">非antd实现不起作用原因</h2>
<p>我在自己实现的表单form上使用了<code>display: flex</code>。</p>
<h2 id="heading-3">解决方案</h2>
<p>将顶级标签设置为<code>display: block</code>或者<code>display: inline-block</code>或者<code>display: flow</code>(实验性属性)或者<code>display: table-cell</code>或者<code>display: table-caption</code> 或者 <code>display: list-item</code>。</p>

平时的表单需求都是从上到下，表单多了就出滚动条。最近有个产品给出一个表单多了就分两列的需求。需求描述现有的表单组件展示样式预期的表单组件展示antd的表单实现直接在form上增加非antd实现不起作用原因我在自己实现的表单form上使用了。解决方案将顶级标签设置为或者或者(实验性属性)或者或者或者。