ZBLOG

现在布局是比如说客户姓名:11111然后是下一行我想让他一行展示三个

如果您想要在一行中展示三个输入框,您可以使用 CSS Flexbox 或 Grid 布局来实现。以下是一个示例代码,演示如何将输入框排列成三列:

HTML 和 JavaScript 示例

<div class="modal-body">
    <!-- 动态内容将插入这里 -->
</div>
$.ajax({
    url: `../d/exemptionReduction/selectInforList?loanCodes=${loanCodes}`,
    contentType: 'application/json',
    type: 'POST',  
    lang: defLanguage, 
    async: false, 
    success: function(res) {
        var dialogData = JSON.parse(res); 
        if (dialogData.success) {
            const modalBody = document.querySelector('.modal-body');

            for (let i = 0; i < dialogData.data.length; i++) {
                // 创建并添加一行(容器)
                const row = document.createElement('div');
                row.classList.add('input-row'); // 添加类以应用样式

                // 创建输入框
                createInputElement(row, '客户名称', dialogData.data[i].name);
                createInputElement(row, '客户代码', dialogData.data[i].customerId);
                createInputElement(row, '身份识别', dialogData.data[i].ident);

                // 将整行添加到 modalBody 中
                modalBody.appendChild(row);
            }
        } else {
            console.error('Failed to fetch data:', dialogData.message);
        }
    },
});

// 创建输入框函数
function createInputElement(container, labelText, value) {
    const inputWrapper = document.createElement('div');
    inputWrapper.classList.add('input-wrapper'); // 包装每个输入的 div

    const label = document.createElement('label');
    label.textContent = labelText;

    const input = document.createElement('input');
    input.type = "text";
    input.value = value;

    inputWrapper.appendChild(label);
    inputWrapper.appendChild(input);
    
    container.appendChild(inputWrapper); // 将包装后的 div 添加到容器中
}

CSS 示例

接下来,我们需要一些 CSS 来定义布局,使每行显示三个输入项:

.modal-body {
    display: flex;
    flex-direction: column; /* 每个新的 row 都是一个新行 */
}

.input-row {
    display: flex;
    justify-content: space-between; /* 在一行中均匀分配空间 */
}

.input-wrapper {
   flex: 1; /* 每个输入项平分空间 */
   margin-right: 10px; /* 输入之间的间距 */
}

.input-wrapper:last-child { /* 最后一个元素不需要右边距 */
   margin-right: 0;
}

关键点:

  1. Flexbox:通过设置 .input-rowdisplay: flex; 来让它内部的内容在同一行内排列。
  2. 均匀分布:使用 justify-content: space-between; 来确保子元素之间有相等的间隔。
  3. 响应式布局:使用 flex 属性使得每个 .input-wrapper 在可用空间中平分。

这样,您就能够在同一行上显示多个输入框了,同时保持良好的视觉效果和易于操作性。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20608

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?